【譯】相對完整的Gulp4升級指南
原文鏈接 The Complete-Ish Guide to Upgrading to Gulp 4
Gulp4雖然一直在開發中,但是再將來的某一天你始終會用上它。這篇文章將向你介紹Gulp3.x和Gulp4之間的不同點,以及教你如何相對無痛的遷移到新的版本。
安裝
在你開始使用最新版的Gulp之前,你需要確認你當前的Gulp版本。通常,你只需要更新你的 package.json 中的版本號就行了,不過有時候你也有可能碰到一些額外的麻煩。最可能的原因是你分別在當前項目文件夾下和本地全局中都安裝了Gulp(如果你讀過了這篇文章 the practice of using npm scripts to access the locally installed version of CLI’s ,那就好辦多了。雖然在這里它可能還是幫不了你太多)。因此,首先你要把你項目文件夾下的Gulp刪除,如果你在全局環境中也安裝了Gulp,最好也把它刪了。
npm uninstall gulp --save-dev
npm uninstall gulp -g
現在你就可以在你的項目中安裝Gulp4。因為它還沒有正式發布,我們只能直接通過Github來安裝它:
npm install gulpjs/gulp.git#4.0 --save-dev
當它在npm上發布后,你就可以像平常一樣使用 npm install gulp --save-dev 了。而且,當他最終正式發布時,我們也最好停止從Github上安裝,改為直接從npm上進行安裝。好了,現在我們還有另一個東西需要安裝:GLI工具。跟現在的Grunt類似的,Gulp4把GLI工具從Gulp的核心代碼中剝離了。Gulp3和Gulp4都能使用獨立出來的GLI工具。
npm install gulp-cli --save-dev
如果你不想在你的項目中使用npm scripts,你需要使用 -g 替換 -save-dev 來進行全局安裝。現在你就可以像以前一樣使用 gulp 命令了,但是你應該會得到一個錯誤信息,因為你需要更新你的 gulpfile.js 來兼容最新版的Gulp。
任務重構
如果你的任務代碼十分簡單,不依賴其他任何東西。那你將幸運的不需要做任何修改!不過令人哀傷的是,相當一部分人都需要修改他們的代碼。Gulp4做的最大的一個改變就是 gulp.task 方法現在只支持兩個參數,分別是任務名和運行任務的function。舉個例子,下面的任務代碼可以很好的運行在Gulp3和Gulp4上面:
gulp.task('clean', function() {...})
但是當你使用三個參數時怎么辦?我們該怎么控制任務之間的相互依賴?這時你應該會用到最新的 gulp.series 和 gulp.parallel 方法。這兩個方法會接受一個函數列表或一堆任務名,然后組合成一個方法。 gulp.series 會返回一個方法用來順序執行它所接受的任務/方法,而 gulp.parallel 返回的方法則會并行的運行它們。Gulp總算能夠讓我們自由的選擇以串行或并行的方式來執行任務而不再需要其他的第三方依賴(比如常用的 run-sequence ),也不再需要定義一堆讓人看不懂的任務依賴。
因此,如果你以前是這么寫:
gulp.task('styles', ['clean'], function() {
...
});
那你現在可以這樣:
gulp.task('styles', gulp.series('clean', function() {
...
}));
在改寫的時候,不要忘了現在你的主任務方法也是放在gulp.series里面調用,所以不要忘了在結尾加上括號。很多人經常犯這個錯誤。
注意,由于 gulp.series 和 gulp.parallel 返回的是一個方法,所以他們是可以被嵌套調用的。如果您的任務往往有多個依賴任務,你會經常嵌套調用它們。比如這個例子:
gulp.task('default', ['scripts', 'styles'], function() {
...
});
你可以改寫成:
gulp.task('default', gulp.series(gulp.parallel('scripts', 'styles'), function() {
...
}));
不過,這樣代碼的可讀性將大大受影響。不過考慮到這樣會使你代碼更加的靈活可控,這點代價也就無所謂了。當然你也可以自己封裝一些helper/alias方法來簡化的你的代碼,提高可讀性,我也不反對,但我應該不會這么去做。
未完………………
來自: https://segmentfault.com/a/1190000005357048