変更監視と複数タスク実行を組み合わせたgulp利用の実践
以下では、これまで説明した内容を複数組み合わせたgulpの利用例を紹介します。今回はgulpを利用して以下のような自動化を実現します。
- SassファイルをコンパイルしてCSSファイルを生成し、それを最小化
- JavaScriptファイルのログ出力コードを削除して最小化
- ファイルを変更した時に、以上の処理を自動実行後、ブラウザを自動リロード
サンプルの説明
本章で取り上げるサンプル（More_gulp_1）は、JavaScriptで背景色をランダムに変更するシンプルなWebページです。前回記事で紹介したHello_gulp_4サンプルと基本的に同じ内容ですが、文字色などの設定を（Sassから生成する）CSSで行うようにしています。
今回サンプルで利用するgulpプラグインを表3に示します。前回記事で利用したgulp-strip-debug、gulp-uglifyのほか、Sass／CSS関連とブラウザの自動リロードを行うプラグインを追加しています。各プラグインのオプションなどの詳細情報は、gulpのプラグインページから検索できます。
| 名前 | 機能 |
|---|---|
| gulp-strip-debug | console.logなどのログ出力コードを削除 |
| gulp-uglify | JavaScriptの最小化 |
| gulp-sass | SassファイルをコンパイルしてCSSファイルを生成 |
| gulp-minify-css-mpath | CSSファイルの最小化 |
| gulp-livereload | ブラウザの自動リロード |
gulpとプラグインを利用するためにはリスト11のようにnpm installコマンドで事前にインストールします。gulp-minify-css-mpathのみプラグイン名と指定するパッケージ名（gulp-minify-css）が違うことに注意してください。
npm install --save-dev gulp npm install --save-dev gulp-strip-debug npm install --save-dev gulp-uglify npm install --save-dev gulp-sass npm install --save-dev gulp-minify-css npm install --save-dev gulp-livereload
リスト11を実行すると、フォルダ内のプロジェクト設定ファイル（package.json）にgulpとプラグインの利用情報が記録されます。なおサンプルコードに含まれるpackage.jsonにはgulpとプラグインの情報が記録済みなので、単にフォルダ内で「npm install」コマンドを実行するとgulpとプラグインをまとめてダウンロードできます。
今回サンプルは表4のような構成になっています。これらのファイルが変更されたとき、JavaScriptとSassファイルを処理するようにgulpを設定していきます。
| フォルダ | ファイル | ファイル内容 |
|---|---|---|
| More_gulp_1 | index.html | Webページファイル |
| More_gulp_1/js_src | color.js | 背景色を変更する処理のJavaScriptファイル |
| More_gulp_1/scss_src | index.scss | ページのSassファイル |
gulpfile.jsの説明
サンプルコードのgulpfile.jsをリスト12に示します。
// gulpの指定 ...（1）
var gulp = require("gulp");
// gulpプラグインの指定 ...（2）
var stripDebug = require("gulp-strip-debug");
var uglify = require("gulp-uglify");
var sass = require("gulp-sass");
var minifyCSS = require("gulp-minify-css");
var liveReload = require("gulp-livereload");
// Sass/CSSタスクの定義 ...（3）
gulp.task("sass", function() {
return gulp.src("scss_src/*.scss") // 処理対象を指定 ...（3a）
.pipe(sass()) // Sassコンパイル ...（3b）
.pipe(minifyCSS()) // 最小化 ...（3c）
.pipe(gulp.dest("css")); // ファイル出力 ...（3d）
});
// JavaScriptタスクの定義 ...（4）
gulp.task("javascript", function() {
return gulp.src("js_src/*.js") // 処理対象を指定 ...（4a）
.pipe(stripDebug()) // ログ出力コードを削除 ...（4b）
.pipe(uglify()) // 最小化 ...（4c）
.pipe(gulp.dest("js")); // ファイル出力 ...（4d）
});
// 変更監視タスクの定義 ...（5）
gulp.task("watch", function() {
// LiveReloadサーバーを開始 ...（5a）
liveReload.listen();
// ファイルが変更されたらcompileタスクを実行 ...（5b）
gulp.watch(["index.html", "scss_src/*.scss", "js_src/*.js"], ["compile"]);
});
// compileタスクの定義 ...（6）
gulp.task("compile", ["sass", "javascript"], function() {
liveReload.reload();
});
// defaultタスクの定義 ...（7）
gulp.task("default", ["compile", "watch"]);
まず（1）でgulp、（2）でプラグインを読み込んで利用できるようにします。
（3）はSassファイルのコンパイルとCSSファイル最小化のタスクです。（3a）で指定されたscss_src配下のscssファイルを（3b）でコンパイルしてCSSファイルを生成して（3c）で最小化、（3d）でcssフォルダに書き込んでいます。
（4）はJavaScriptの処理タスクです。処理内容は前回記事のサンプルと同一で、ログ出力コードの削除と最小化を行っています。
（5）はファイルの変更を監視するタスクです。（5a）でブラウザ更新に必要なLiveReloadサーバーを開始し、（5b）ではindex.html、scssファイル、jsファイルが変更された時に後述のcompileタスク（6）を実行するよう記述しています。
（6）のcompileタスクはsassタスク（3）とjavascriptタスク（4）を実行した後、liveReload.reloadメソッドでブラウザをリロードするタスクです。
最後に（7）で、watchタスク（5）とcompileタスク（6）を起動するデフォルトタスクを記述しています。
なお、gulp-livereloadで自動リロードを行うためには、HTMLファイルにリスト13のようなJavaScriptの参照設定を行うか、livereload.comで配布されているプラグインをWebブラウザに導入します。サンプルコードのHTMLファイルにはリスト13の内容が記述されています。
<script src="http://localhost:35729/livereload.js"></script>
「gulp」コマンドでリスト12のdefaultタスクを実行すると、依存関係によりcompileとwatchのタスクが実行されます。compileタスクはさらにsassタスクとjavascriptタスクを実行し、SassとJavaScriptファイルの変換処理が行われます。またwatchタスクはファイル変更監視を開始します。ファイルが変更されるとwatchタスクの定義により再びcompileタスクが実行され、SassとJavaScriptを再処理したあとでブラウザがリロードされます。
本サンプルでSassファイル（index.scss）は最終的に最小化されたCSS（index.css）に変換されます。リスト12の（3c）行をコメントアウトしてタスクを実行すると最小化の処理がスキップされ、最小化前のCSSファイルを確認できます。元のSassファイル、コンパイル済みの（最小化されていない）CSSファイル、最小化済みのCSSファイルはそれぞれ図3のようになります。
まとめ
本記事では、JavaScriptのタスク実行ツールgulpについてAPIを説明するとともに、ファイル変更監視／SASSコンパイル・CSS最小化／ブラウザ自動リロードを組み合わせて実行するサンプルを紹介しました。
最後に、類似のタスク自動実行ツールであるGruntと、gulpの選択について考察します。それぞれの特徴や違いを表5で比較します。
| 機能 | gulp | Grunt |
|---|---|---|
| タスク実行 | 非同期（同期実行も可能） | 同期 |
| 連続した処理の記述 | メソッドチェーンで記述 | 別個に記述 |
| 連続処理中のファイル | メモリ上でまとめて処理 | 都度ファイルに書き出す |
| 変更監視 | gulp自身の機能 | contrib-watchプラグイン |
| プラグイン（2016年2月現在） | Gruntより少ない（2,166個） | 多い（5,510個） |
| 最新版リリース | 2016年2月（3.9.1） | 2014年5月（0.4.5） |
タスクの非同期実行ができる点や、連続した処理をメソッドチェーンで記述できるなど、gulpはGruntに対する機能的なアドバンテージがあります。一方でプラグインの数を単純に比較するとGruntの方が充実しています。
Gruntは最新版のリリース時期が比較的古く、1年以上更新されていないのが気になるかもしれません。ただ「古い」ということは「枯れている」ともいえ、どのように解釈するかは人それぞれでしょう。なお両者のGitHubを見る限りでは、どちらも継続的に更新が行われています。
非同期実行やメソッドチェーンといったよりモダンな機能を活用したいならgulpが魅力的に見えます。一方で状況によってはプラグインが充実していて「枯れている」Gruntの選択が有効な場合もあるでしょう。絶対的にどちらが正しいということはなく、結局は利用者が適切なツールを選択して使いこなすことが重要といえます。
