這是在講 Gulp 不是飲料是任務自動化工具這件事:同步執行 Task

前言

當我們 task 越寫越多的時候,我們通常都會希望能夠一個指令執行所有 task,不然每次都要 gulp scss、gulp babel…

起手式

早期 Gulp 3 是沒有所謂的同步執行 task,以往都是必須使用 gulp-sequence 來達到目的,但是由於我們所撰寫的是 Gulp 4,那就不需要安裝這個套件來達到我們所需要的目的了,因為 Gulp 4 本身就已經開始支援同步執行與非同步執行的語法囉

那撰寫的方式如下

1
gulp.task('default',gulp.series('copyHTML','scss','babel','image'))

你會發現 task 任務名稱是 default,這個命名方式可以方面我們只輸入 gulp 就執行所有任務

default

但是這邊要注意,如果你出現 TypeError: gulp.series is not a function 這個錯誤訊息,代表有可能你的 Gulp 版本並不是 Gulp 4 唷

那本身 Gulp 4 有提供兩個 api,一個是我所使用的 gulp.series,另一個則是 gulp.parallel

gulp.parallel 可以同時執行兩個任務的意思,例如這樣寫

1
gulp.task('default', gulp.series('copyHTML','scss', gulp.parallel('babel','image')));

當你輸入 gulp 之後你可以發現這兩個任務會同時執行,然後同時結束

parallel

但是認真講,我自己本身也只有使用過 gulp.series 而已

如果不夠清楚可以看這張圖片

gulp

參考文獻

圖片來源