gulp の run-sequence を使うときは return を忘れずに

嵌ったので備忘録として .
gulp で同期処理を行うのは面倒くさい . それを簡単にしてくれるモジュールが 「run-sequence」.

README 読めば分かることなのだが , run-sequence を使って同期処理を行う場合は, 各 gulp タスクは return で返す必要があるとのこと .

例えば,


var gulp = require('gulp');
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
var runSequence = require('run-sequence');

// 初期化
gulp.task('clean', function (callback) {
    // 行うタスク処理
    // 処理内容は省略
});

// TypeScript コンパイル
gulp.task('typescript-compile', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// ファイル結合
gulp.task('concat', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// ファイル圧縮
gulp.task('uglify', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// デフォルトタスク
gulp.task('default', function (callback) {
    runSequence('clean', 'typescript-compile', 'concat', 'uglify', callback);
});

上記の場合は , clean , typescript-compile, concat, uglify の順で実行されることを期待して書いたビルドスクリプト . 各タスク処理内で return を省いていると 非同期で実行されてしまう模様 .

そこで各処理に return を付けると期待通りに動く .


var gulp = require('gulp');
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
var runSequence = require('run-sequence');

// 初期化
gulp.task('clean', function (callback) {
    // 行うタスク処理
    return del(['./src/build/*.js'], callback);
  //^^^^^^
});

// TypeScript コンパイル
gulp.task('typescript-compile', function () {
    // 行うタスク処理
    return gulp.src(['./src/**/*.ts'])
  //^^^^^^
        .pipe(typescript(
            { 
                target: "ES5", 
                module: 'commonjs', 
                removeComments: true, 
                noExternalResolve: true 
            }
         ))
        .js
        .pipe(gulp.dest('./src/js/'));
});

// 以下省略

  • 正確には Promise オブジェクトまたは Stream オブジェクトを使用するタスクの場合には return をつけてオブジェクトを run-sequence に返さないといけない. README に記載のあるソースにもコメントで Return the Promise from del() と Return the stream from gulp と記述がある.
  • ただの同期処理のタスクであれば return を返す必要はない.
  • 同期処理にしたいものが一組しかない場合は, run-sequence を使うまでもなく return をつけて依存関係を設定すればよい .