Gulp 4.0 前瞻

Gulp 4.0 發佈在即，新首頁已經上線，新版將會對任務系統作較大修改，（通過社區討論——其實沒什麼討論啦你們異口同聲紛紛同意。這是有多少不爽纔會這樣齊刷刷……）再也不兼容 3.x 及以前版本的任務系統。

是否是摩拳擦掌躍躍欲試了？新 Gulp 玩起來~

新年新氣象

先來看看新版有什麼不一樣（CHANGELOG.md）：

• 新的任務系統（基於 bach，替換掉了原先基於 orchestrator 的任務系統）
  
  
  • 移除 gulp.reset
  • gulp.task 再也不支持三個參數的用法
  • gulp.task 用字符串註冊的任務必須是直接在命令行中調用的任務
  • gulp.task 能夠接受單參數語法，這個參數必須是一個命名函數，函數名會被做爲任務名
  • 添加了 gulp.series 和 gulp.parallel 方法用於組合任務
  • 添加了 gulp.tree 方法用於獲取任務樹，傳入 { deep: true } 參數能夠獲得一個 archy 兼容的節點列表
  • 添加了 gulp.registry 方法以定製註冊表。
• 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不過是以軟連接的方式
• gulp.dest 和 gulp.symlink 方法添加了 dirMode 參數容許對目標目錄更好地控制
• gulp.src 接收的文件匹配字符串會順序解釋，因此你能夠寫成這樣 gulp.src(['*.js', '!b*.js', 'bad.js'])（排除全部以 b 開頭的 JS 文件可是除了 bad.js）
• gulp.src 方法添加了 since 選項，篩選在特定時間點以後修改過的文件（用於增量編譯）
• 將命令行分離出來成爲一個獨立模塊，以便節約帶寬/空間。用 npm install gulp -g 或 npm install gulp-cli -g 均可以安裝命令行，只是 gulp-cli 不包含模塊代碼因此比較小
• 命令行添加了 --tasks-json 參數，能夠導出整個任務樹以供他用
• 命令行添加了 --verify 參數用以檢查 package.json 中是否包含黑名單插件（違背準則而被禁入官方插件列表的可憐娃們）。

新的 gulp.task

從 3.x 升級到 4.x 主要作的就是修改任務定義，之前的任務是這麼寫的：

javascriptgulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['build']);

這裏 build 任務的寫法在 Gulp 4.0 下仍是OK的，default 就不行了，要改爲這樣：

javascriptgulp.task('default', gulp.parallel('build'));

好像多了13個字符……莫急。若是想要作個 clean-build 呢？之前要這樣：

javascriptgulp.task('clean', function(){
  del('dist');
});

gulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('clean-build', ['clean'], function(){
  gulp.start('build');
});

gulp.task('default', ['build']);

按新的寫法，clean 和 build 仍是照舊，clean-build 和 default 略有不一樣：

javascriptgulp.task('clean', function(){
  del('dist');
});

gulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('clean-build', gulp.series('clean', 'build'));
gulp.task('default', gulp.parallel('build'))

這其中 clean 和 build 任務能夠寫成獨立的函數：

javascriptfunction clean(){
  del('dist');
}

function build(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
}

gulp.task(clean);
gulp.task(build); // 也能夠取個更酷的名字 gulp.task('super-fast-building', build);
gulp.task('clean-build', gulp.series(clean, build));
gulp.task('default', gulp.parallel(build)); // 只有一個任務的時候 `parallel` 和 `series` 都行

是否是感受漂亮多了？任務的操做內容和相互間的依賴順序都更加清晰。

不過……你只要不是特別粗糙，都會發現如今執行任務只有開始沒有結束了：

bash$ gulp
[22:07:25] Using gulpfile ~/project/gulpfile.js
[22:07:25] Starting 'default'...
[22:07:25] Starting 'clean'...
[22:07:25] Starting 'build'...

$ # What are you waiting for?

由於咱們還沒寫完:P，如今更讚的來了。任務函數能夠接受一個 callback 做爲參數，只有當你調用了這個 callback，這個任務纔算結束：

javascriptfunction clean(callback){
  del('dist', callback);
}

function build(callback){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
    .on('finish', callback);
}

gulp.task(clean);
gulp.task(build);
gulp.task('clean-build', gulp.series(clean, build));
gulp.task('default', gulp.parallel(build));

今後你不再會看到 default 任務先完成，而後才執行一大串 clean、build、...，而後再等個三分鐘，圖片目錄的壓縮才結束的穿幫劇情了。最奇葩的是，Gulp 還說每一個任務執行時間都不到10毫秒……誰信！

到了 4.0，這事情終於完美了：

bash$ gulp
[22:07:25] Using gulpfile ~/project/gulpfile.js
[22:07:25] Starting 'default'...
[22:07:25] Starting 'clean'...
[22:07:25] Finished 'clean' after 33 ms
[22:07:25] Starting 'build'...
[22:07:25] Finished 'build' after 437 ms
[22:07:25] Finished 'default' after 471 ms

試用 Gulp 4.0

雖然它尚未正式發佈，可是阻擋不了咱們嚐鮮的腳步。只要如此這般：

bash# 若是安裝過全局的 gulp 的話先卸載之
$ npm uninstall gulp -g

# 安裝全局的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" -g

# 到項目目錄裏刪掉本地的 gulp
$ npm rm gulp --save-dev

# 安裝本地的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" --save-dev

做爲起步，這兒有一個 4.0 的 gulpfile.js 能夠參考學習。開始爽起來吧！