WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね