gulp4坑:assert.js throw err AssertionError
阿新 • • 發佈:2018-12-12
func strong mis lob 有一個 nal sersync 樣式 指定 前情:
- 由於更換電腦,重裝環境,在gulp的時候總是報錯
assert.js:350
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask]
查了很久才發現是gulp3.9.1和4.0的差別造成的。
gup3 VS gulp4 區別
Gulp 4最大的變化就是你不能像以前那樣傳遞一個依賴任務列表。
Gulp3,如果有一個任務A,B和C的列表,你想在一個序列中運行A,B,和C,代碼如下:
gulp.task(‘default‘, [‘A‘, ‘B, ‘C‘]);
在Gulp 4中,你不能再這樣做了。你會得到以下錯誤:
assert.js:350 throw err; ^ AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (D:\python\project\前端工程化\shop\node_modules\undertaker\lib\set-task.js:1 0:3) at Gulp.task (D:\python\project\前端工程化\shop\node_modules\undertaker\lib\task.js:13:8) at Object.<anonymous> (D:\python\project\前端工程化\shop\gulpfile.js:34:6) at Module._compile (internal/modules/cjs/loader.js:688:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10) at Module.load (internal/modules/cjs/loader.js:598:32) at tryModuleLoad (internal/modules/cjs/loader.js:537:12) at Function.Module._load (internal/modules/cjs/loader.js:529:3) at Module.require (internal/modules/cjs/loader.js:636:17) at require (internal/modules/cjs/helpers.js:20:18)
不要用Gulp3的方式指定依賴任務,你需要使用gulp.series和gulp.parallel,因為gulp任務現在只有兩個參數。
gulp.series:按照順序執行
gulp.paralle:可以並行計算
gulp.task(‘my-tasks‘, gulp.series(‘a‘, ‘b‘, ‘c‘, function() {
// Do something after a, b, and c are finished.
}));
gulp.task(‘build‘, gulp.parallel(‘styles‘, ‘scripts‘, ‘images‘, function () { // Build the website. }));
或者這樣
gulp.task(‘my-tasks‘, gulp.series(‘a‘, gulp.parallel(‘styles‘,‘scripts‘, ‘images‘), ‘b‘, ‘c‘, function() {
// Do something after a, b, and c are finished.
}));
相關任務必須在被調用之前發生
在Gulp 3中,可以讓你的文件引用它們之前的任務,因為一切都是默認異步執行的。現在,您需要在依賴關系在您的gulp文件中定義之後放置調用依賴項的任務。否則,你會得到這樣的錯誤:
assert.js:85
throw new assert.AssertionError({
^
AssertionError: Task never defined: serve
at getFunction (D:\python\project\前端工程化\shop\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
at arrayMap (D:\python\project\前端工程化\shopnode_modules\lodash.map\index.js:140:21)
at map (D:\python\project\前端工程化\shopnode_modules\lodash.map\index.js:1836:10)
at normalizeArgs (D:\python\project\前端工程化\shopnode_modules\undertaker\lib\helpers\normalizeArgs.js:19:10)
at Gulp.series (D:\python\project\前端工程化\shopnode_modules\undertaker\lib\series.js:13:14)
at Object.<anonymous> (D:\python\project\前端工程化\shop/gulpfile.js:41:27)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
解決方法:使依賴任務在文件的底部。
gulp4中需要指定task結束
gulp4中,必須告訴gulp我們的task任務已經完成了。gulp3中,我們不必要這麽做,因為如果沒有發出異步完成信號,那麽當任務返回時,gulp會認為它已經完成了,gulp4中必須明確指出任務完成了。
使用回調函數作為您的任務的第一個參數,只需在完成時調用該函數。
gulp.task(‘clean‘, function(done) {
del([‘build]);
done();
});
告訴gulp任務完成的另一個常見方法是 返回(return) 一個流或者 Promise:
gulp.task(‘minify:js‘, function() {
return gulp.src(‘client/**/*.js‘)
.pipe(minify())
.pipe(gulp.dest(‘build‘));
});
gulp.task(‘message‘, function() {
return new Promise(function(resolve, reject) {
console.log("HTTP Server Started");
resolve();
});
});
瀏覽器同步刷新,而不是樣式註入
我的Gulp 3文件沒有問題,在HTML重建上進行刷新,並在CSS更改上進行閃電般的風格註入,但升級到Gulp 4後,瀏覽器現在會在CSS更改後重新加載。
- 需要以不同的方式做三件事。首先確保您將一個文件數組傳遞給Browsersync構造函數
var bsConfig = {
server: ‘build‘,
files: [
‘build‘
],
open: false,
};
gulp.task(‘browserSync‘, function() {
bs.init(bsConfig);
});
- 其次,如果你有任務bs.stream()結束styles,你可以刪除它。
- 第三,當你想在你的開發服務器上進行實時風格註入時,你的watch和browserSync任務需要並行運行, 而不是終止,就像這樣:
gulp.task(‘serve‘, gulp.series(‘build‘, gulp.parallel(‘watch‘, ‘browserSync‘)));
參考
https://github.com/gulpjs/gulp/blob/master/docs/API.md
https://www.fastless.com/gulp-4
gulp4坑:assert.js throw err AssertionError