シンプルなタスクでgulpの特徴を理解
ここではシンプルなタスクを実行させるサンプルでgulpの利用法と特徴を説明します。
はじめてのgulpタスク
最初にgulpで単一のタスクを実行させます（このサンプルはサンプルコード内のHello_gulp_1フォルダに含まれています）。まず任意のフォルダを作成してリスト2のコマンドを入力し、gulpを使えるようにします。ここでインストールしたgulpは実際のタスク処理に利用されます。
npm install --save-dev gulp
なお、サンプルファイルをそのまま利用する場合は、パッケージファイル（package.json）にgulpを定義済みなので「npm install」コマンドでgulpをインストールできます。
次にgulpの設定ファイルgulpfile.jsをリスト3のように作成します。
// gulpの指定 ...（1）
var gulp = require("gulp");
// defaultタスクの定義 ...（2）
gulp.task("default", function() {
console.log("first gulp task");
});
（1）でgulpのオブジェクトを変数gulpに生成し、（2）でdefaultタスクを生成しています。コンソールに文字列を出力するだけのタスクです。
準備ができたらコマンドプロンプトでgulpコマンドを実行します。
gulp
リスト4のコマンドにより、リスト1でシステム自体にインストールされたgulpがコマンドラインツールとして実行され、リスト2でフォルダにインストールされたgulpを呼び出して実際のタスク処理を行います。
リスト4のように引数なしでgulpコマンドを実行するとdefaultタスクが実行されます。その結果、図2のようにコンソールに文字列が出力されます。
なお「gulp <タスク名>」と引数にタスク名を指定することで、実行するタスクを明示的に指定できます。
タスクの並列実行
次にタスクの並列実行を試します（このサンプルはサンプルコード内のHello_gulp_2フォルダに含まれています）。gulpfile.jsをリスト5に示します。
// gulpの指定 ...（1）
var gulp = require("gulp");
// defaultタスクの定義 ...（2）
gulp.task("default", ["task1", "task2"]);
// task1タスク ...（3）
gulp.task("task1", function() {
setTimeout(function(){
console.log("task1 executed with delay.");
}, 1000);
});
// task2タスク ...（4）
gulp.task("task2", function() {
console.log("task2 executed.");
});
（2）のようにtaskメソッドの第2引数にタスク名の配列を指定すると、それらのタスクが並列に実行されます。ここでは（3）のtask1タスクと（4）のtask2タスクが実行されますが、task1タスクはsetTimeoutによりタスク完了が1秒遅延します。
リスト5のgulpfile.jsを配置してgulpを実行すると、task1タスクとtask2タスクが並列実行されます。task2タスクはtask1タスクの完了を待たず並列実行されるため、図3のようにtask2のコンソール出力が先に行われます。
このようにgulpでは特に意識しなくてもタスクが並列実行されるため、タスク完了待ちによる実行時間の増加を最低限に抑えられます。
タスクを順番に実行するには
gulpではタスクを並列化せず順番に実行することもできます（このサンプルはサンプルコード内のHello_gulp_3に含まれています）。task2タスクの実行をtask1タスク完了後に行いたい場合はリスト6のようにします。
// gulpの指定 ...（1）
var gulp = require("gulp");
// defaultタスクの定義 ...（2）
gulp.task("default", ["task2"]);
// task1タスク ...（3）
gulp.task("task1", function(callback) {
setTimeout(function(){
console.log("task1 executed with delay.");
callback();
}, 1000);
});
// task2タスク ...（4）
gulp.task("task2", ["task1"], function() {
console.log("task2 executed.");
});
task2タスク（4）で第2引数の["task1"]という記述は、自身より先にtask1タスクを実行するという依存依存を表します。またtask1タスク（3）ではタスク完了時に実行するコールバック関数callbackを記述することで、後続する依存タスク（＝task2タスク）の実行を待たせることができます。defaultタスク（2）ではtask2のみを実行するように記述しますが、（4）の依存関係によりtask1タスクが先に実行されるようになります。
リスト6のタスクを実行すると、task1タスク→task2タスクの順で実行されてコンソール出力が行われるようになります。
