2016/03/23更新

[フロントエンド] 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
これで「browserifycopyClientJsreplaceHost」という順でタスクを実行することができます。



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・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。