プラグインの活用とストリームによる連続処理
ここまではgulp単体でシンプルなタスクを実行させてきましたが、実際はさまざまなプラグインを組み合わせて、より複雑なタスクを実行することになるでしょう。本章ではJavaScriptファイルを加工するプラグインを例に、プラグインの利用法を紹介します。また一連の処理を連続して実行するストリームの概念や、その処理内容を記述するメソッドチェーンについても説明します。
サンプルの説明
本章で取り上げるサンプル（サンプルコード内のHello_gulp_4）は、JavaScriptで背景色をランダムに変更するシンプルなWebページです。
Hello_gulp_4サンプルは表2のような構成になっています。gulpタスクによる処理の対象となるのはcolor.jsです。
| フォルダ | ファイル | ファイル内容 |
|---|---|---|
| Hello_gulp_4 | index.html | Webページファイル |
| Hello_gulp_4/js_src | color.js | 背景色を変更する処理のJavaScriptファイル |
複数プラグインの処理をメソッドチェーンでつなげる
今回は表3のgulpプラグインを組み合わせて用いることで、JavaScriptからログ出力コードを削除して最小化します。
| 名前 | 機能 |
|---|---|
| gulp-strip-debug | console.logなどのログ出力コードを削除 |
| gulp-uglify | JavaScriptの最小化 |
プラグインを利用するためにはリスト7のようにnpm installコマンドで事前にインストールします。
npm install --save-dev gulp-strip-debug npm install --save-dev gulp-uglify
なお、サンプルファイルをそのまま利用する場合は、パッケージファイル（package.json）にgulpとプラグインを定義済みなので「npm install」コマンドでgulpとプラグイン一式をインストールできます。
タスクを定義したgulpfile.jsをリスト8に示します。
// gulpの指定 ...（1）
var gulp = require("gulp");
// gulpプラグインの指定 ...（2）
var stripDebug = require("gulp-strip-debug");
var uglify = require("gulp-uglify");
// defaultタスクの定義 ...（3）
gulp.task("default", function() {
return gulp.src("js_src/*.js") // 処理対象を指定 ...（4）
.pipe(stripDebug()) // ログ出力コードを削除 ...（5）
.pipe(uglify()) // 最小化 ...（6）
.pipe(gulp.dest("js")); // ファイル出力 ...（7）
});
以下でリスト8の内容を説明します。最初に（1）でgulpを、（2）でgulpプラグインを読み込みます。
（3）がタスク定義です。まず（4）のgulp.srcメソッドで処理対象ファイル（js_src配下の*.jsファイル）を指定します。gulp.srcメソッドの返り値は、処理対象ファイルのストリームを表すJavaScriptオブジェクトになります。
ストリームオブジェクトに対してpipeメソッドを実行すると、引数で指定された処理を処理対象ファイルに行い、処理済みのストリームオブジェクトを返します。そのため複数の処理をpipeメソッドのメソッドチェーンでつなげて記述できます。ここではgulp-strip-debugプラグインによるログ出力コードの削除（5）と、gulp-uglifyプラグインによる最小化（6）を行っています。このとき一連の処理はメモリ上で連続して行います。（5）の処理結果を一時的にファイルに書き出し、それを改めて読み込んで（6）で処理するといったことは行いません。
（7）のgulp.destメソッドはストリームの出力先を指定するメソッドです。すべての処理を終えたストリームをjsフォルダに出力するよう記述しています
このようにgulpでは、一連の処理をストリームとしてメモリ上で高速に処理できます。この特徴からgulpは「ストリーミングビルドシステム」と呼ばれ、タスクごとに結果をファイルに出力するGruntとの大きな違いになっています。ストリームの処理内容をメソッドチェーンで直感的に記述できるのもgulpの利点です。
リスト8のタスクを実行すると、JavaScriptファイルに対するログ出力コード削除と最小化を行えます。
プラグインの補足説明
リスト8（6）のuglifyメソッドにはリスト9のようにJavaScriptオブジェクトでオプションを指定できます。
.pipe(uglify({
mangle: false, // 関数／変数名を最小化しない
output: {
max_line_len: 128 // 1行の最大文字数を設定
}
}))
主なオプションを表4に示します。preserveCommentsはすべてのコメントを残す「all」、ライセンスコメントのみ残す「license」などが指定できます。output、compressはgulp-uglifyプラグインが利用するJavaScript最小化ツールであるUglifyJSに引き渡す出力オプション／圧縮オプションをJavaScriptオブジェクトで指定します。オプションの詳細はUglifyJSのドキュメントを参照してください。
| 名称 | 内容 | デフォルト値 |
|---|---|---|
| mangle | 関数／変数名を最小化する | true（行う） |
| output | 出力オプション | null（指定なし） |
| compress | 圧縮オプション | {}（指定なし） |
| preserveComments | ソースコードコメントを残す | まったく残さない |
一方gulp-strip-debugプラグインには指定できるオプションはなく、単純にログ出力コードの削除を行います。リスト8（6）の行をコメントアウトして（最小化を無効にして）タスクを実行すると、gulp-strip-debugプラグインによりconsole.logメソッドの行が「void 0;」と置き換えられることが確認できます。この「void 0;」記述はgulp-uglifyプラグインが行う最小化により完全に削除されます。
まとめ
本記事では、JavaScriptのタスク実行ツール「gulp」についてサンプルを用いて概要と特徴を紹介しました。機能的にはGruntと類似していますが、並列処理や一連の処理を記述するメソッドチェーンなどGruntにない特徴を備えており、使い分けを検討するに値するツールになっています。
次回はgulpのAPIについて詳細を説明し、gulpの変更監視機能といくつかのプラグインを組み合わせたより実践的な利用法を紹介します。またGruntとgulpを比較し、場合によってどちらを使うべきかを考察します。
