Run-Sequence で Gulp タスクの並列処理・直列処理を管理する

Gulp は gulp.task('task', ['dependency'], ... という形で、当該タスクが依存するタスク (事前に実行しておいて欲しいタスク) を定義できる。Java における Ant などもこのような作りなのだが、どうしても手前のタスクに遡って確認していくような追い方になってしまってつらいし、直列実行ができない。

そこで、Run-Sequence を使って直列実行と並列実行を管理する。

$ npm i -D run-sequence

以下が使用例。

const gulp = require('gulp');
const $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'run-sequence']
});

gulp.task('build', (callback) => {
  return $.runSequence(
    'del-www',
    ['css', 'js'],
    'html',
    callback
  );
});

この例だと、del-www タスクの後に css タスクと js タスクを並列実行し、両方のタスクが終わったら html タスクに移る、という使い方になる。

各タスクでは gulp.src()...pipe(gulp.dest()) な Gulp のパイプを return する必要がある。これを忘れると正しく処理ができないので注意。

関数の最後に置いている callback は何なのかというと、この build タスクをさらに別の Run-Sequence タスクに組み込む時に生きてくる。

gulp.task('emu', (callback) => {
  return $.runSequence(
    'build',
    'cordova-emulate',
    callback
  );
});

今度のタスクは、先程の build タスクを全て実行した後、cordova-emulate タスクを実行する、という Run-Sequence タスクになっている。このように Callback を最後に必ず仕込んでおくことで、タスクの入れ子に対応できる。

この2つを守れば、個別に Dependencies を書いていかずとも、全体を統括する Run-Sequence タスクだけ整えてやれば上手く動くようになる。

なお、Gulp v4 以降では gulp.parallel というメソッドで同様のことができるようになるようだ。