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

URL: https://webrandum.net/gulp-series-parallel/
公開日: 2019-02-14
更新日: 2019-03-29
カテゴリー: コーディング
タグ: gulp
出典: Webrandum（著者: サイトウ マサカズ）

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のような遅延処理があったとしても）。