便利なGruntの弱点を補うgulp.jsのインストールと使い方：gulp.jsで始めるWeb開発爆速自動化入門（2/3 ページ）

　先ほどはgulpでコピーを実行するタスクを定義してみました。そのタスクと同じ処理をGruntで行う場合のGruntfile.jsを見てみましょう。

'use strict'
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //コピーを実行するタスク
    copy: {
      main:{
        files: [ {
            //src/jsディレクトリ以下のファイルをコピー
            expand: true,
            flatten: true,
            src: ['src/js/*'],
            dest: 'dest/js'
          }, {
            //src/htmlディレクトリ以下のファイルをコピー
            expand: true,
            flatten: true,
            src: ['src/html/*'],
            dest: 'dest/html'
        }]
      }
    }
  });
  // Load tasks(grunt実行時に読み込むプラグイン)
  grunt.loadNpmTasks('grunt-contrib-copy');
  // Default tasks(grunt実行時に実行するタスク)
  grunt.registerTask('default', ['copy']);
};

　gulpfile.jsより多少記述量が増えました。確かに、gulpのような手続き型で処理を順番に書いていくのではなく、実行したいタスク内容を宣言的に定義しています。イメージとしては、以下のような感じですね。

• Grunt→タスクをJavaScriptオブジェクトとして定義する
• gulp→JavaScriptでタスク処理をそのまま記述する

【2】パフォーマンス

　各タスクの実行パフォーマンスについても違いがあります。gulpでは複数のタスクを使った処理において、各タスクを実行する際に（中間ファイルの生成などで）ファイルI/Oが発生することがあります。

　そのため、タスクやタスク対象のファイルが多くなってきた場合、gruntタスクの実行に時間がかかることがあります。

【3】プラグイン

　gulpではプラグインを作成して機能を拡張でき、「gulp.js plugin registry」で目当てのプラグインを探せます。

　このプラグインシステムはGruntと似ていますが、gulpはプラグインの品質において厳格なガイドラインを設けています。

• ※ガイドライン日本語訳

　プラグインはGruntと同じくnpmを使用して公開されますが、このガイドラインを遵守しなかった場合、検索の順位に反映されることになるようです。

gulp.jsのセットアップと動作確認

　では、Node.jsとgulpをインストールして動かしてみましょう。

Node.jsのインストール

　Nodeのダウンロードページから、使用するプラットフォーム用バイナリをダウンロードして、インストールします（※Macの場合は「Homebrew」や「NVM」を使用してインストールしても構いません）。

　Node.jsのインストールができたら、コンソールで動作確認してみましょう（※下記バージョンは2014年8月時点で最新のもの）。

% node -v
v0.10.30
% npm -v
1.4.18

　Node.js、npm共にインストールできているのが分かります。

gulp.jsのインストール

　次に、gulpをインストールします。「-g」オプションを付けてグローバルインストールし、プロジェクト用ディレクトリを作成したら、そこにもgulpをインストールします。

% npm install -g gulp
% mkdir -p path/rour/gulp-project && cd path/your/gulp-project
% npm install gulp
% gulp -v //インストールバージョン確認
 
[15:20:27] CLI version 3.8.7
[15:20:27] Local version 3.8.7

gulpの動作確認

　インストールが完了したら動作を確認してみましょう。gulpfile.jsを下記のように記述します。

'use strict';
var gulp = require('gulp');
gulp.task('foo', function() {
    console.log('Hello World!');
});

　ここでは「foo」タスクを定義しています。このタスクはメッセージを表示するだけのシンプルなタスクです。では実行してみましょう。

%gulp foo
[15:24:20] Using gulpfile path/your/gulp-project/gulpfile.js
[15:24:20] Starting 'foo'...
Hello World!
[15:24:20] Finished 'foo' after 70 μ s

　コンソールにメッセージが表示されました。

gulpでよく使用する主なAPI、5選

　実際にgulpfile.jsを記述し、タスクを定義するためにはgulpの提供するAPIを使用します。ここでは代表的なものをいくつか解説します。

【1】タスクを定義――gulp.task(name[, deps], fn)

　タスクを定義します。第2引数には依存するタスクを配列で記述でき、タスク実行前に実行されます。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

【2】入力対象となるファイル群を指定――gulp.src(globs[, options])

　入力対象となるファイル群を指定します。glob引数に指定できる形式は、

「node-glob」のシンタックスになります。src関数で指定したファイル群をpipe関数でつなぎ、タスクを実行していきます。

【3】タスク名を指定して実行――gulp.run(tasks…[, cb])

　タスク名を指定することで、対象のタスクを実行できます。

//fooタスク内でbarタスク実行
gulp.task('foo', function(event) {
    gulp.run('bar');
});

【4】出力先となるパスを指定――gulp.dest(path)

　出力先となるパスを指定します。

【5】ファイル群を監視――gulp.watch(glob, cb)

　指定されたファイル群を監視し、ファイルが更新された場合に第2引数の関数を実行します。

//jsファイルが更新されたらメッセージ表示
gulp.watch('**/*.js', function(event) {
    console.log("js file changed!");
});

さらに知りたければ公式リファレンスで

　以上が、gulpでよく使用する基本的なAPIです。なお、APIの詳細は「gulp/API.md at master・gulpjs/gulp・GitHub」をご確認ください。