タスクランナーgulp.js最速入門

相変わらず仕事ではデザインやりつつJavaScript書いている。

タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。

gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。

ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。

この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。

導入とHelloWorld

まずは導入。npmからgulpをインストールする。

$ npm install gulp -g

$ gulp -v 
[gulp] CLI version 3.5.6
[gulp] Local version 3.5.6

インストールできたら、以下のようなgulpfile.jsを置く。gulpfile.jsは、gulpコマンドを実行すると自動的に読み込まれるファイルで、Grunt.jsでいうGruntfile.jsである。

var gulp = require('gulp');

gulp.task('hoge', function() {
    console.log('HelloWorld!');
});

以下みたいにgulpコマンド叩くとタスクが実行される。

$ gulp hoge
HelloWorld!

タスクを定義する

gulpでは、タスクが扱うデータはストリームによって処理される。例えば、lessファイルをコンパイルした後autoprefixerにかけるようなコードは、以下のようになる。

var gulp = require('gulp');
var less = require('gulp-less');
var autoprefix = require('gulp-autoprefixer');

gulp.task('css-compile', function() {
  return gulp.src('less/*.less')
    .pipe(less())
    .pipe(autoprefix('last 1 version'))
    .pipe(gulp.dest('css/'));
});

タスク定義の中で、gulp.src()で処理するファイルを指定して、gulp.dest('css/')で処理されたファイルが書き込まれる先を指定する。gulp.src()やgulp.dest()の詳細は、gulp API docsを参照する。

基本的にgulpそのものは何か特定の機能も持っているわけではない。ユーザはやりたいことに合わせてgulp-*パッケージをnpmでインストールしてから使うことになる。ここでは、gulp-lessとgulp-autoprefixerを使っている。

デフォルトで実行されるタスクを指定する場合にはGrunt.jsと同様にdefaultという名前のタスクを作るとよい。

タスクの定義には、次のように単に依存するタスクを複数指定することもできる。

gulp.task('default', ['foo', 'bar']);

これで、defaultタスクを実行するとfooタスクとbarタスクが実行される。

タスクの実行順を保証する

gulpでは、タスクの実行は自動的に並列化される。これはどういうことかといえば、以下のようなタスクを定義したとする。

gulp.task('default', ['foo', 'bar']);

この時、defaultタスクが実行されるとfooタスクとbarタスクが並列で実行される。その結果タスクの実行時間を短くしてくれる。

ただし状況によっては必ずしも並列で実行してほしくない場合がある。

例えば、生成したファイルを消すcleanタスクとファイルを生成するbuildタスクがあるとして、このふたつのタスクを実行する時にcleanタスクが終わってからbuildタスクが開始されないと意味が無い。

gulpでタスクの順序を指定する場合には、タスクを非同期化して、かつタスクの依存関係を設定する。

タスクを非同期化するには３つの方法がある。

• ストリームを返す
• コールバックを呼び出す
• プロミスを返す

1番簡単なのは、単にストリームを返すようにするやり方で、これは単にgulp.src()から生成したストリームを返せばそれで良い。

gulp.task('foo', function() {
  return gulp.src('src/*.js')
    .pipe(minify())
    .pipe(gulp.dest('/build'));
});

2番目のやり方は、タスクが終了したらその終了タイミングを伝えるコールバックを呼び出してやること。タスクを定義する仮引数を指定するとそこにコールバックが渡されるようになる。

gulp.task('foo', function(done) {
  setTimeout(function() {
    // タスク終了
    done();
  }, 1000);
});

3番目は、タスク内でプロミスを返すやり方。個人的には使う機会がないので説明は省略。gulp API docsを参照する。

タスクを非同期化して、次にタスクの依存関係を追加すれば、タスクは順番通り実行されるようになる。タスクの依存関係を設定するには、gulp.task()メソッドの２番目の引数に依存するタスク名の配列を指定する。

以下の例では、fooタスクを実行しようとすると自動的にbarタスクが実行され、タスクが完了して初めてfooタスクが実行される。

gulp.task('bar', function() {
  return gulp.src('src/*.js')
    .pipe(minify())
    .pipe(gulp.dest('/build'));
});

// このタスクを実行する前にかならずbarタスクが実行される
gulp.task('foo', ['bar'], function() {
  return gulp.src('./build/*.js')
    .pipe(doanything())
    .pipe(gulp.dest('./build'));
});

注意としては、単にタスクをまとめただけでは依存関係を設定したことにはならず、並行で実行される。以下のようなコードの場合、foobarタスクを実行しても、fooタスクとbarタスクは並列で実行される。

gulp.task('foobar', ['foo', 'bar']);

依存関係を設定せずに順序を指定したい場合には、次に記述するrun-sequenceを使う。

依存関係を設定する代わりにrun-sequenceを使う

タスクの実行順序を指定したいが、依存関係は設定したくない場合がある。

例えば、キャッシュファイルを消すclear-cacheタスクとファイルを生成するbuildタスクがあり、必ずしも毎回キャッシュを消したくはない場合があると仮定する。この時buildタスクにclear-cacheタスクを依存先に設定すると、buildタスクを実行されるたびに毎回キャッシュが消されてしまう。しかし依存関係を設定しなければ順序を保証できない。

こういう時には、run-sequenceパッケージを使うとよい。

var runSequence = require('run-sequence');

gulp.task('foobar', function() {
  runSequence('foo', 'bar');
});

foobarタスクを実行すると、fooタスクとbarタスクが順に実行される。run-sequneceパッケージを使うと依存関係を設定しなくてもタスクを順に実行できる。

タスク内のストリームをマージする

タスクの定義の中に複数のストリームがある場合がある。

gulp.task('foo', function() {
  // どうやって複数のストリームを返せば良い? 
  gulp.src('src/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('js/'));

  gulp.src('src/*.less')
    .pipe(less())
    .pipe(gulp.dest('css/'));
});

タスクを非同期化するためにはストリームを返さなければならないが、ストリームが複数ある場合にはどうすればよいのだろう。

event-streamパッケージには、ストリームを一つにまとめるmergeメソッドがあるのでそれを使えばよい。

var merge = require('event-stream').merge;

gulp.task('foo', function() {
  return merge(
    gulp.src('src/*.coffee')
      .pipe(coffee())
      .pipe(gulp.dest('js/')),

    gulp.src('src/*.less')
      .pipe(less())
      .pipe(gulp.dest('css/'))
  );
});

複数のストリームがある場合にはevent-streamパッケージのmergeメソッドを使ってストリームを一つにまとめるとよい。

タスク内のストリームの実行順を指定する

event-streamのmergeメソッドを使ってストリームを一つにまとめる場合にも、これらのストリームは並列で実行される。

タスク定義内で、複数のストリームに順序を付けて実行したい場合には、ストリームのイベントリスナを使う。

タスクを非同期化する場合には、タスクの完了コールバックも併せて使う。

// jsのコンパイルが終了してから、lessのコンパイルが行われる
gulp.task('foo', function(done) {
  gulp.src('src/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('js/'))
    .on('end', function() {
      gulp.src('src/*.less')
        .pipe(less())
        .pipe(gulp.dest('css/'))
        .on('end', done); // タスク完了
    });
});

watchタスクを定義する

gulpには、ファイルの変更を検知してタスクの実行を行なうgulp.watch()が予め用意されている。

gulp.task('serve', function() {
  // src/js/*.jsファイルが変更されたら、build-jsタスクを実行する
  gulp.watch('src/js/*.js', ['build-js']);
});

watch()メソッドの第二引数には、タスクの配列だけではなくコールバックも記述できる。

gulp.task('serve', function() {
  // src/js/*.jsファイルが変更されたら、build-jsタスクを実行する
  gulp.watch('src/js/*.js', function() {
    gulp.src('src/*.coffee')
      .pipe(coffee())
      .pipe(gulp.dest('js/'));
  });
});

エラーが出てもコケないようにplumber使う

gulpではタスクの実行中に何かエラーが起こるとそのままタスクの実行が終了する。普通のタスクであればこれは問題ないが、watchするタスクの中でエラーが起きるとwatch自体も終了されてしまう。

そういった時には、エラーがおきても中断させないgulp-plumberを使える。

var plumber = require('gulp-plumber');

gulp.task('css', function() {
    gulp.src('src/*.less')
      .pipe(plumber()) // lessのコンパイルでコケても終了しない 
      .pipe(less())
      .pipe(gulp.dest('css/'))
});

gulp.task('watch', function() {
  gulp.watch('src/js/*.less', ['css']);
});

gulp-connectを使ってlivereloadする

ファイルが変更された場合にlivereloadしたい場合には、watchとgulp-connectを以下のように組合せて使う。

var gulp = require('gulp');
var connect = require('gulp-connect');

gulp.task('serve', ['connect'], function() {
  gulp.watch([
    'docroot/*.*'
  ]).on('change', function(changedFile) {
    // 変更がかかったファイルをconnect.reload()でライブリロードする
    gulp.src(changedFile.path).pipe(connect.reload());
  });
});

gulp.task('connect', function() {
  connect.server({
    root: [__dirname + '/docroot/'],
    port: 9001,
    livereload: true
  });
});

よく使うgulp-*パッケージ

その他、gulpを使う上で頻繁に使うパッケージを紹介しておく。

• gulp-header, gulp-footer - ストリームに何か文字列を付け加える
• gulp-concat - ストリームで扱うファイルを一つのファイルに連結する
• gulp-rename - ストリームで扱うファイル名を変更する
• gulp-clean - ファイルやディレクトリ消してくれる
• gulp-util - Grunt.jsで言うところのgrunt-util

終わりに

Grunt.jsに比べるとgulpの情報やリソースは充実していないが、一度慣れるとわざわざGrunt.jsを使う気がしなくなる。Grunt.jsに不満を感じ始めた時にはgulpを試してみると良いと思う、まる。