はじめに
gulpはHTML／JavaScript開発環境向けのタスク自動実行ツールです。類似のツールとしてGruntが存在しますが、gulpは複数の処理を一連のストリームとして処理できる「ストリーミングビルドシステム」であるなど、Gruntにはない特徴を備えています。
前回記事ではgulpの基本的な特徴を説明し、JavaScriptの最小化を自動的に行う例を紹介しました。本記事ではgulpのAPIをより詳しく説明するとともに、変更監視により自動的にタスクを実行する方法や前回紹介できなかったプラグインの利用法のサンプルを紹介します。またgulpとGruntを比較して、それぞれが向く利用シーンを考察します。
対象読者
- 余計な作業はやらずにプログラミングに集中したい方
- いつも同じような作業をやっていると感じている方
- gulpとGrunt、どちらを使うべきか悩むことが多い方
必要な環境の準備
gulpの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。gulpのインストール方法については前回記事を参照してください。
今回は以下の環境で動作を確認しています。
- Windows 7 64bit版
- Node.js v5.4.1 64bit版
- gulp v3.9.0
- Internet Explorer 11
より深く理解するgulpのAPI
gulpを利用するには設定ファイルgulpfile.jsにタスクの内容を記述します。前回記事で記述方法を説明しましたが、実はこの記述の中ではgulpが提供するAPIを利用しています。以下ではgulpのAPIをより詳細に説明します。
gulpオブジェクトの取得
まず下準備として、requireメソッドでリスト1のようにgulpの機能を含むJavaScriptオブジェクトを取得します。以下で説明するgulpのAPIはすべて、JavaScriptオブジェクトのメソッドとして提供されます。
var gulp = require("gulp");
個々のタスク処理を表すtask
gulpに実行させるタスクを定義するにはgulpのtaskメソッドを利用します。メソッドの第1引数はタスクの名前、第2引数はタスクの内容をJavaScriptの関数で記述します。
gulp.task("default", function() {
console.log("default task");
});
リスト2の例では、console.logメソッドでログ出力する処理をタスク名「default」で設定しています。なおタスク名がdefaultのタスクは、gulpコマンドでタスク名を指定しないときに自動的に実行されます。
タスクには、自分が依存する別のタスクを配列で指定できます。例をリスト3に示します。
gulp.task("default", ["task1", "task2"], function() {
/* 何らかの処理 */
});
gulp.task("task1", function(){ /*何らかの処理*/ });
gulp.task("task2", function(){ /*何らかの処理*/ });
リスト3では、defaultタスクを実行するとまず第2引数で指定された別のタスクtask1、task2が非同期で（並列に）実行され、両方が完了した後に自身のタスクが実行されます。
また記述を変更してリスト4のようにすると、defaultがtask2に、task2がtask1に依存するため、defaultタスクを実行するとtask1→task2→defaultの順で直列にタスクが実行されます。
gulp.task("default", ["task2"], function() {
/* 何らかの処理 */
});
gulp.task("task1", function(){ /*何らかの処理*/ });
gulp.task("task2", ["task1"], function(){ /*何らかの処理*/ });
タスク処理内容を表すJavaScript関数を省略することもできます。リスト5のdefaultタスクは単に別のタスクtask1、task2を非同期で実行します。
gulp.task("default", ["task1", "task2"]);
