メルマガをらくらくコーディング！ 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/
├ 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が得意ですが、本当の特技は薪割りです。
あわせて読みたい記事
