Gulp JSでの順次タスク実行

Gulp JSは、フロントエンドおよびWeb開発用のプロジェクトビルダーおよびタスクマネージャーであり、人気のあるGrunt JSに代わる価値のあるものです。 GulpがGruntと異なる数少ない点の1つは、デフォルトでは、すべてのタスクが非同期で実行されることです。 一般的に、すべてのタスクは同時に実行されると言えます。

最近Gulpを勉強しているときに、いくつかのタスクを同期的に（同期的に）実行する必要に直面しました。 Gulpのドキュメントにはこの問題が記載されていますが、私はそれを理解する前に少しいじらなければなりませんでした。

そのため、タスクの実行を同期させる3つの方法がありますが、これを機能させるには、タスクの依存関係を明示的に指定する必要があります。 依存関係については少し後で、最初にこれらの3つの方法を分析します。

1.コールバックを使用して、コールバック

gulp.task('sync', function (cb) { // setTimeout     setTimeout(function () { cb(); }, 1000); }); 

2.戻りフロー

 gulp.task('sync', function () { return gulp.src('js/*.js') .pipe(concat('script.min.js') .pipe(uglify()) .pipe(gulp.dest('../dist/js'); }); 

3. Promiseを活用する

 gulp.task('sync', function () { var deferred = Q.defer(); // setTimeout     setTimeout(function () { deferred.resolve(); }, 1000); return deferred.promise; }); 

次に、別のsecondTaskタスクがあるとします。これは、 syncタスク（上記の方法のいずれかを使用して作成した）の結果に依存します。 したがって、 syncタスクをsecondTaskタスクの依存関係として宣言します。

 gulp.task('secondTask', ['sync'], function () { //       //  'sync'   ! }); 

私が犯した主な間違いは、タスクのリストを依存関係として宣言すると、リスト内の次のタスクが前のタスクが終了した後にのみ実行されるときに、指定された順序でタスクが実行されるという仮定にありました。 しかし、これはまったく真実ではありません。

 gulp.task('thirdTask', function () { //       }); //  ,      //  'sync',    //  'thridTask'     //   'default'.    . //    'default',  // 'sync'  'thridTask   //  gulp.task('default', ['sync', 'thirdTask'], function () { // -  }); 

defaultタスクを希望の順序で実行するには、 thirdTaskタスクをsyncタスクに依存させるthirdTaskがthirdTaskます。

 gulp.task('thirdTask', ['sync'] function () { //      'sync'.   //   ,   'default'   // ,  'thirdTask'    }); gulp.task('default', ['sync', 'thirdTask'], function () { // -  }); 

thirdTaskを起動するthirdTask 、 syncも開始されることに注意してください。 thirdTaskタスクを実行するwatchタスクがある場合、これは望ましくない動作です。

この記事が、Gulpを使用して厳密に定義された順序でタスクを実装する方法を誰かが理解するのに役立つことを願っています。 しかし、Gulpを非常に高速かつ強力にするのは、タスクの非同期起動と非同期実行であるため、本当に必要な場合にのみ同期実行オプションを使用することに注意してください。