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

[中村修太，クラスメソッド]

gulpとGruntの比較、3本勝負！

　gulpとGruntはその経緯から非常によく比較されますが、具体的にはどの辺りが違うのか説明していきます。

【1】タスク定義方法

　GruntはJSON形式を用いて「宣言的」にタスク定義を記述していきます。これはこれで理解しやすいのですが、タスク定義が多くなってきた場合や詳細なタスク制御を行いたい場合、タスク同士の関連が分かりにくくなってしまいます。

　これに対してgulpは、「手続き的」な方法で設定ファイルを記述します。一般的には、こちらの方が細かな制御がしやすく、シンプルな記述が可能になっています。

　先ほどは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']);
};

Gruntfile.js

　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!');
});

gulpfile.js

　ここでは「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」をご確認ください。