Gulp 4: gulp.parallel gulp.series -- 全新的任務執行體系

Gulp 4 在任務執行體系上有一個很重要的改動，下面咱們一塊兒來看一下這個新的特性和如何從Gulp 3遷移到新版本

Gulp 3中的任務執行鏈

在瞭解新特性以前，讓咱們先看看以前是怎麼作的。一般Gulp容許給task定義依賴（dependency），這保證了task執行以前它依賴的task已經得到執行。看下面代碼：

// 默認任務，執行scripts和styles這兩個任務
gulp.task('default', ['scripts', 'styles'], function() {...});

// scripts 和 styles 任務都調用了 clean 任務
gulp.task('styles', ['clean'], function() {...});
gulp.task('scripts', ['clean'], function() {...});

// Clean 任務清空了build目錄
gulp.task('clean', function() {...});

這是很典型的Gulpfile代碼，你目的是執行scripts任務和styles任務，在此以前把build輸出的目錄清空以保證每次都均可以得到最新的build結果。這種語法很優雅，跟其餘構建工具也相似。

當Gulp開始工做，它會建立一個任務依賴樹，見下圖。

它發現clean任務是另外兩個task的依賴，從而確保clean只執行一次。

有一點須要注意：全部task都以最大併發量執行。它（default task）的執行順序見下圖：

首先執行clean任務，而後並行執行scripts和styles任務。

這種方式有一些問題：

一旦你定義了上面的依賴鏈，依賴鏈的執行順序就被肯定了。

例如，給其中一個styles任務添加了監聽（watcher）當css文件改變時從新執行styles任務，這時候就會出問題。想象一下，你每次改動了css文件就會觸發styles任務，gulp會首先執行clean而後執行styles。如此一來，你構建打包的文件會由於clean任務執行被刪除。

目前沒有好的辦法來順序執行前面定義的各個task。「執行某一任務前先執行其依賴的任務」 -- 這種執行方式致使了前面的問題。

有一個Gulp插件用來解決這個問題：run-sequence。它如今已是Gulp 4的一部分了。

Gulp 4中的任務執行函數

Gulp 4拋棄了依賴參數（dependency parameter），用執行函數來代替：

• gulp.series 用於串行（順序）執行
• gulp.parallel 用於並行執行

上面的兩個函數接受兩個參數：

• 要執行的任務的名字
• 須要執行的函數

若是你想並行執行scripts和styles，你能夠這麼寫：

gulp.task('default', gulp.parallel('scripts', 'styles'));

更棒的是，gulp.parallel和gulp.series是函數，能夠接受其它函數作參數，因此你能夠隨意嵌套使用它們，從而建立複雜的執行順序。

上圖的執行順序是：A, 而後 B, 而後 C 和 D 並行執行, 最後 E。

從Gulp 3遷移到Gulp 4

儘可能讓任務以最大併發量執行能夠提升執行效率，咱們能夠考慮把依賴的任務數組替換爲gulp.parallel函數，最上面的任務代碼能夠改成像下面這樣：

gulp.task('styles', gulp.parallel('clean', function() {...}));
gulp.task('scripts', gulp.parallel('clean', function() {...}));

gulp.task('clean', function() {...});

gulp.task('default', gulp.parallel('scripts', 'styles'));

這個方法的第一個問題是，執行scripts任務和styles任務時，clean任務會先執行。在併發的狀況下，這意味着，執行styles時，可能把scripts任務的輸出刪掉。咱們不想這樣，讓咱們把上面的代碼修改一下，使用gulp.series來建立串行執行的任務。

gulp.task('styles', gulp.series('clean', function() {...}));
gulp.task('scripts', gulp.series('clean', function() {...}));

gulp.task('clean', function() {...});

gulp.task('default', gulp.parallel('scripts', 'styles'));

這樣好多了，然而還有須要解決的問題。首先，依賴仍然寫死在了代碼裏，咱們執行scripts或者styles時，clean任務會先被執行。其次，Gulp 4 不會進行依賴檢查，咱們的執行樹（執行default task）看起來像這樣：

clean任務被執行兩次，這是致命的，由於有可能上一個任務的執行結果被下一個任務的執行刪除。

爲了作一次完美的健壯的遷移，實現最初的執行順序，而且避免寫死代碼，咱們能夠這樣作：

先來看一下最初的執行順序：

default task的執行順序是：先clean，而後styles和scripts並行執行。

每個能夠併發進行的步驟能夠組合在gulp.parallel函數中，其他的任務按順序放在gulp.series函數中，像這樣：

對應的代碼是：

// 去掉了clean任務依賴
gulp.task('styles', function() {...});
gulp.task('scripts', function() {...});

gulp.task('clean', function() {...});

// Per default, start scripts and styles
gulp.task('default',
  gulp.series('clean', gulp.parallel('scripts', 'styles'),
  function() {...}));

這樣一來，default task的任務執行順序就跟最初同樣了。