gulp 4.0から新しく加わったseriesとparallelについての備忘録

gulp4.0から新しくseriesとparallelが追加され、タスクの処理の順番を制御することができるようになりました。最初はどういう事かよく分からなかったので、自分用の備忘録としてメモしておきます。

今までのgulpの処理

gulpというのは行う処理を「タスク」という単位で用意して、そのタスクを並列で処理していく事で、処理のスピードを上げていました。

しかし、並列でタスクを処理していくという事はスピードが早くなる反面、処理の順番が選べないという事でもあります。

例えば、「style.scssをstyle.cssにコンパイルする」というタスクと「style.cssを圧縮してstyle.min.cssを作成する」というタスクを並列で処理してしまうと、まだSassをコンパイルしていないのに、先にstyle.cssを圧縮してしまう恐れがあります。

このように、必ずこの順番で処理してほしい場合も出てきます。
それを回避するために、直列処理をするプラグインもありましたが、4系からは並列処理と直列処理を選択するためのseriesとparallelが追加されました。

seriesとparallel

seriesが直列処理で、parallelが並列処理です。

直列処理はタスクを1つずつ順番に処理していくので、順番を明確にしたい時に使用します。逆にparallelは並列処理で、タスクを同時に処理していきます。

それぞれの書き方は下記の通りになります。

gulp.series(タスク名, タスク名);  // 直列処理
gulp.parallel(タスク名, タスク名); // 並列処理

実際に組み込むと下記のようになります。

gulp.task('default', gulp.series(
  gulp.parallel(タスク1, タスク2)
));

こうすると、タスク1が終わった後にタスク2が実行されるようになるわけですね（setTimeoutのような遅延処理があったとしても）。