メルマガをらくらくコーディング! gulp-inline-css

テーブルでコーディングしていた頃

前回はテーブルコーディングの思い出話しに花が咲いてしまい、
本題を持ち越すという、醜態を演じてしまいました。

懐かしのテーブルコーディング時代

気を取り直して、今回は本題の gulp-inline-css について、
お届けしていきたいと思います。

そういえば、テーブルが全盛の時代は通話料を気にしながらネットサーフィンしていました。
ネットサーフィンって言葉もあまり聞かなくなりましたね。

接続時に「ブ〜…ピギョ〜ンピギョ〜ン…ブパ〜」という音がモデムからしました。
懐かしいです。

そうそうテーブルといえばこんなことも…(フェードアウト)

gulp-inline-css とは

何ができるのか

まずは細かい説明は置いておいて、
何ができるのかを見ていきましょう。

メルマガをテーブルコーディングする際には、
インラインスタイルでCSSを書いていく必要がります。
これは見通しが悪く、共通のスタイルも個別に指定する必要があるため修正も面倒です。
毎回使い回すヘッダーやフッターも管理が大変です。

ところが、gulp-inline-cssを使うと、
いつものコーディングのようにCSSとHTMLを分離して書くことが出来るんです。

例えばこのようにHTMLとCSSを書くと、

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>EXAMPLE</title>
  <link href="./css/contents.css" rel="stylesheet">
</head>
<body>

  <table class="wrap"></table>

</body>
</html>

contents.css

.wrap {
  width: 715px;
  margin: 0 auto;
  text-align: center;
}

下記のように書き出してくれます。

書き出し後

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>EXAMPLE</title>
  
</head>
<body>

  <table class="wrap" style="margin: 0 auto; padding: 0; text-align: center; width: 715px;"></table>

</body>
</html>

gulp-inline-css のインストール

gulp-inline-css はGulpの利用が前提となっています。
Gulpのインストール(グローバル)を済ませておいてください。
下記のページが参考になります。

『5分でできるnpmとgulpのインストール(GIFアニメ付き)』

gulp-inline-css を動かす

Gulpの準備が完了したら、お好みの場所に作業用のディレクトリを作ります。
下記のようなディレクトリ構造にします。
※面倒な方はサンプルファイルをダウンロードしてお使いください。

example.zip

example/
 ├ dist/
 ├ src/
 │ └ index.html
 │ └ css/
 │   └ _common.scss
 │   └ contents.scss
 │   └ contents.css
 ├ gulpfile.js
 └ package.json

src が作業用のディレクトリです。
ここにHTMLやCSSを設置します。

dist には画像などの実際に公開に必要なファイルを格納します。

gulpfile.jsとpackage.jsonの内容は下記になります。

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-convert-encoding": "^1.0.0",
    "gulp-inline-css": "^3.1.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "run-sequence": "^1.2.2"
  }
}

gulpfile.js

/* =========================================================
 VARIABLE
========================================================= */

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var inlineCss = require('gulp-inline-css');
var runSequence = require('run-sequence');
var src = './src';
var dist = './dist';

var paths = {
  'scss': src + '/**/css/',
  'css' : src
}

var options = {

  serve : {
    open: 'external',
    port: 3000,
    ui: false,
    server: {
      baseDir: dist
    }
  },

  sass : {
    errLogToConsole: true,
    outputStyle: 'compressed'
  },

  inlineCss : {
    applyStyleTags: false,
    removeStyleTags: false
  },

  watch : [
    dist + '/**/*.html',
    dist + '/**/*.php'
  ]

}


/* =========================================================
 BROWSER SYNC
========================================================= */

gulp.task('serve', () => {
  browserSync.init(options.serve);
});

/* =========================================================
 SASS
========================================================= */

gulp.task('sass', () => {
  return gulp
    .src(paths.scss + '**/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(sass(options.sass).on('error', sass.logError))
    .pipe(gulp.dest(paths.css))
    .pipe(browserSync.reload({stream: true}))
});

/* =========================================================
 INLINE CSS
========================================================= */

gulp.task('inlineCss', () => {
  return gulp.src(src + '/**/*.html')
  .pipe(plumber({
    errorHandler: notify.onError('<%= error.message %>')
  }))
  .pipe(inlineCss(options.inlineCss))
  .pipe(gulp.dest(dist))
});

/* =========================================================
 RUN SEQUENCE
========================================================= */

gulp.task('production', function(callback) {
  return runSequence('sass', 'inlineCss', callback);
});

/* =========================================================
 WATCH
========================================================= */

gulp.task('watch', () => {

  // scssファイルが変更されたらproductionタスクを実行
  gulp.watch(paths.scss + '**/*.scss', ['production']);

  // htmlファイルが変更されたらinlineCssタスクを実行
  gulp.watch(src + '**/*.html', ['inlineCss']);

  // html,phpファイルが変更されたら、ブラウザをリロード
  gulp.watch(options.watch).on('change', browserSync.reload);

});

gulp.task('default', ['serve', 'watch']);

今回は仮にデスクトップにexampleディレクトリがあるとして進めていきます。
ターミナルを開き、下記のように打ちます。

$ cd /Users/(ユーザー名)/Desktop/example

cd 以降はターミナル画面にドラッグアンドドロップすると
勝手にパスが入るので楽です。

そしてenterキーを押します。
するとターミナルがそのディレクトリを見に行くようになります。

そこでおもむろに、

$ npm install

と打ち、これでもかというほどの力を込めてenterキーを

ターーーンッッッ!

必要なファイルがインストールされます。

Gulpを実行

続けてターミナルに Gulp の実行を命令します。

$ gulp

ブラウザに新しいウインドウが開き、
192.168.0.0:3000 的なURLが表示されます。

example ディレクトリ内のファイルが監視され、
HTMLやCSSの変更と同時に dist へファイルが書き出されます。

browserSync の機能でリアルタイムにブラウザが更新されるのでチェックも楽になります。

試しに contents.scss に何か追記してみてください。
保存後、HTMLが dist に書き出され、ブラウザがリロードされるはずです。

またこのURLは同一ネットワーク内の別なデバイスで確認することも出来ます。

_common.scss には毎回使い回すスタイルを書いておけば、
全てのファイルを一括で変更できて便利です!

まとめ

gulp-inline-css を使ってもメーラーのレンダリング問題が解決するわけではありません。
しかしインラインでスタイルを書いていく作業がなくなるだけでも随分効率が良くなります。

黒い画面を使うので抵抗がある方もおられるかもしれませんが、
是非一度サンプルファイルをダウンロードして使ってみてください。
便利さに目からウロコが落ちること請け合いです。

Writer

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。