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

追記

Gulp4 から run-sequence が不要になりました. 以前の手順を Gulp4 で実行すると以下のようなエラーが表示されます.

TypeError: gulp.hasTask is not a function

Gulp4 からは同期処理・非同期処理を行う方法が Gulp に搭載されています.
以下の記事が参考になると思います.

• Gulp4を試す

Gulp4 での同期・非同期処理

• run-sequence の場合

例

gulp.task( 'default', () => {
    runSequence('clean','pre-processing', 'bundle', ['copy1', 'copy2', 'copy3'], 'delete', () => {});
});

• Gulp4 の場合は gulp.series と gulp.parallel を使用する

例

gulp.task( 'default', 
    gulp.series(
        'clean',
        'pre-processing',
        'bundle',
        gulp.parallel(
            'copy1',
            'copy2',
            'copy3',
        ),
        'delete'
    )
);

• ※ gulp.series と gulp.parallel を使用する場合でも gulp ストリームの return を忘れないこと.
• ※ タスク内で gulp をストリームを使用していない場合は引数の callback を実行してタスクの終了を通知すること.

以前の情報も残しておきます

備忘録として.
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 と記述がある.
  • Promise に関しては JavaScript Promiseの本 がすごく詳しく解説している.
  • Stream に関しては最新のものは Node.js v11.14.0 Documentation に説明がある.
• ただの同期処理のタスクであれば return を返す必要はない.
• 同期処理にしたいものが一組しかない場合は, run-sequence を使うまでもなく return をつけて依存関係を設定すればよい .