[フロントエンド] Gulpの並列実行挙動ではなく、タスクを順次実行する

こんにちは、@yoheiMuneです。
今日はGulpにおいて複数のタスクを指定した場合に、デフォルトの並行実行ではなく順次実行する方法をブログに書きたいと思います。

目次

Gulpでタスクをあえて順実行したい場合がある

Gulpの実行が高速な理由の一つに、「複数のタスクを並列的に実行する」挙動がありますが、これをあえて無効化して行いたい場合があります。最近だと以下のように、

// gulpfile.js

// 01. BrowserifyでJavaScriptファイルを1つに結合して、
// 02. 他にも必要なJavaScriptファイルをコピーして、
// 03. そして本番リリースするJSすべてにおいて、ホスト名を「localhost→本番用ホスト名」に変換する
gulp.task('production', ['browserify', 'copyClientJs', 'replaceHost']);

複数のタスクをまとめて実行するようなproductionという名前のタスクを定義していましたが、うまく動きませんでした。想定していた動きだと「01 → 02 → 03」と順次に実行してほしいところが、01〜03ともに並列実行されてしまい、03の処理がうまく意図した通りに動いていませんでした。
ということで、Gulpの良さの並列実行をあえて行わず、順次実行する方法を模索しました。

Gulpタスクを順次実行する

執筆時点でのGulp最新版は3.8ですが、Gulp本体には順次実行するオプションはありません（version4からはgulp.seriesというオプションが追加されるとのこと）。ここではrun-sequenceというモジュールを利用します。具体的には以下のように利用します。

まずはモジュールをインストールします。

$ npm install --save-dev run-sequence

次に、gulpfile.jsを記述します。

// gulpfile.js
var gulp = require('gulp');
var runSequence = require('run-sequence');

// gulp.task('production', ['browserify', 'copyClientJs', 'replaceHost']);
gulp.task('production', function (callback) {
    // 順次実行したいものを左から順に指定する
    runSequence('browserify', 'copyClientJs', 'replaceHost', callback);
});

そしてタスクを実行します。

$ gulp production

これで「browserify → copyClientJs → replaceHost」という順でタスクを実行することができます。

run-sequenceがうまく動かないと思ったら

run-sequenceで指定するタスクは、必ずreturnを記述する必要があります。

// gulpfile.js
var gulp = require('gulp');
var del = require('del');

// returnを忘れずに書く.
gulp.task('build-clean', function() {
    // Return the Promise from del() 
    return del([BUILD_DIRECTORY]);
//  ^^^^^^ 
//   This is the key here, to make sure asynchronous tasks are done! 
});

ここだけちょっとしたはまりポイントなので注意が必要です。ここ以外でハマる場合には、以下の参考資料先で調べてみてください。

参考資料

今回は以下のドキュメントを参照させていただきました、ありがとうございます。

https://www.npmjs.com/package/run-sequence

最後に

今日は、Gulpのタスクを順次実行する方法をブログに書きました。ビルド処理というと、並列化できるのは嬉しいですけど、各言語でビルド処理を書いている感覚だとやっぱり順次実行が普通な気がします（そしてv4からその指定ができる）。今後もGulpについては使った技術要素について書いていきたいと思います（忘れずに頑張る）。

本ブログでは、フロントエンド・Python・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！