JavaScriptタスク自動化ツールgulpのAPI説明と実践的な利用例

HTML／JavaScript開発作業を効率化する便利ツールの活用 第6回

タスクの入力と出力を指定するsrcとdest

　gulpのタスクでは、あるファイルを読み込んで複数の処理を連続的に行い、結果を別のファイルに書き出すといったことが行われます。この時に読み込み元を指定するのがsrcメソッド、書き出し先を指定するのがdestメソッドです。基本的な記述形式をリスト6に示します。srcメソッド（1）で指定したファイルに対して処理1、処理2を順に適用して、結果をdestメソッド（2）で指定したファイルに書き込みます。srcメソッド、処理内容、destメソッドはpipeメソッドを利用してメソッドチェーン型式で記述できます。このように一連の処理を流れ（ストリーム）として記述できるのは「ストリーミングビルドシステム」であるgulpの特徴といえます。

リスト6　src／destメソッドによるファイル読み込みと書き出しの指定

gulp.task("default", function() {
    return gulp.src("js_src/*.js") // srcメソッド  ...（1）
        .pipe( /* 処理1 */ )       //
        .pipe( /* 処理2 */ )       //
        .pipe(gulp.dest("js"));    // destメソッド ...（2）
});

　srcメソッド、destメソッドの引数にはそれぞれファイルの入力元、出力先のパスを指定します。destメソッドの引数はパスを1個だけ指定できますが、srcメソッドの引数は文字列の単数指定または配列による複数指定の両方が可能です。またワイルドカードによる指定や、先頭に「!」をつけて対象から明示的に除外することもできます。例えばリスト7はfolder1配下の拡張子txtのファイルを対象としつつ、ファイル名が「test」から始まるファイルを除外するsrcメソッドの指定例です。

リスト7　srcメソッドの対象ファイル指定

gulp.src(["!folder1/test*", "folder1/*.txt"])

　srcメソッド、destメソッドの第2引数にはJavaScriptオブジェクトでオプションを指定できます。

リスト8　srcメソッドにbufferオプションを設定する例

gulp.src("folder1/*.txt", {"buffer" : false})

　srcメソッドのオプションとその意味を表1に示します。

表1　srcメソッドのオプション

名称	意味	デフォルト値
buffer	bufferにファイル全体を格納してタスク処理に渡す	true
read	タスク処理にファイル内容を渡す	true
base	タスク処理対象のベースフォルダ	（指定なし）

　bufferオプションをfalseに設定すると、ファイル内容を順次読みだすstreamとしてタスク処理に受け渡します。なおプラグインによってはbuffer=falseの設定（streamの処理）に対応しない場合があります。readオプションをfalseにするとファイル内容がタスク処理に渡されません。baseオプションにベースフォルダを指定すると、処理結果が指定フォルダ配下のフォルダ構成を維持しながら出力されます。

　一方、destメソッドに指定できるオプションとその意味を表2に示します。

表2　destメソッドのオプション

名称	意味	デフォルト値
cwd	ワーキングフォルダ	process.cwd()（コマンドを実行したフォルダ）
mode	フォルダのパーミッション	0777（誰でも読み／書き／実行可能）

ファイルの変更を監視するwatch

　gulpにファイル変更を監視させるにはwatchメソッドを利用します。変更監視はGruntではプラグイン（contrib-watch）で実現しますが、gulpでは本体の機能として提供されています。リスト9のように記述すると、第1引数で指定されたファイルが変更されるたびに第2引数のタスク（task1とtask2）が実行されます。

リスト9　ファイル変更時にタスクを実行するwatchメソッド記述

gulp.watch("js_src/*.js", ["task1","task2"]);

　またリスト10のように、第2引数にタスクの代わりに処理内容を直接指定することもできます。

リスト10　ファイル変更時に実行する処理をJavaScriptで指定する記述

gulp.watch("js_src/*.js", function(){/* 処理 */});