gulp4 和 gulp3 的区别 throw new assert.AssertionError || done is not a function
2020年7月19日如何安装Gulp 4
首先,如果已经安装了gulp,先把以前版本删除。
1 2 |
npm uninstall -g gulp-cli //卸载gulp-cli命令工具天知道这是什么版本 npm uninstall gulp //卸载gulp命令工具天知道这是什么版本 |
然后我们需要安装gulp-cli。
1 2 |
npm install -g gulp-cli //安装最新的版本的命令工具 npm install gulp //安装最新的版本 2020,7,19 是 4.0.2版本 |
现在,运行gulp -v
应该看能到一些输出:
1 2 |
CLI version: 2.3.0 Local version: 4.0.2 |
gup3 VS gulp4 区别
Gulp 4最大的变化就是你不能像以前那样传递一个依赖任务列表。
Gulp3,如果有一个任务A,B和C的列表,你想在一个序列中运行(确保A在B开始之前完成,而B在C开始之前完成),代码如下:
1 2 3 4 5 6 7 8 9 10 |
CLI version: 2.3.0 Local version: 4.0.2gulp.task('a', function () { // Do something. }); gulp.task('b', ['a'], function () { // Do some stuff. }); gulp.task('c', ['b'], function () { // Do some more stuff. }); |
在Gulp 4中,你不能再这样做了。你会得到以下错误:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
assert.js:85 throw new assert.AssertionError({ ^ AssertionError: Task function must be specified at Gulp.set [as _setTask] (/home/hope/web/node_modules/undertaker/lib/set-task.js:10:3) at Gulp.task (/home/hope/web/node_modules/undertaker/lib/task.js:13:8) at Object.<anonymous> (/home/hope/web/gulpfile.js:31:6) 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) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) |
不要用Gulp3的方式指定依赖任务,你需要使用gulp.series和gulp.parallel,因为gulp任务现在只有两个参数。
gulp.series:按照顺序执行
gulp.paralle:可以并行计算
1 2 3 |
gulp.task('my-tasks', gulp.series('a', 'b', 'c', async done=>{ // Do something after a, b, and c are finished. })); |
1 2 3 |
gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () { // Build the website. })); |
或者这样
1 2 3 |
gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles','scripts', 'images'), 'b', 'c', function() { // Do something after a, b, and c are finished. })); |
重点
1 2 3 4 5 6 7 8 9 10 |
//series 方法 调用的事件前面要加上 async 异步 gulp.task('demo', async() => { /*获取源文件*/ gulp.src(path.join(__dirname, '/src/css/*')) /*这里可以使用 .pipe() 写更多执行流程如压缩 转换,但是不管怎么写,这些都是公共部分*/ /*设置处理后存放的位置 pipe是管道函数,将上个函数执行的结果往下传递*/ .pipe(gulp.dest(path.join(__dirname, '/dist/css'))) }) |
相关任务必须在被调用之前发生。
在Gulp 3中,可以让你的文件引用它们之前的任务,因为一切都是默认异步执行的。现在,您需要在依赖关系在您的gulp文件中定义之后放置调用依赖项的任务。否则,你会得到这样的错误:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
assert.js:85 throw new assert.AssertionError({ ^ AssertionError: Task never defined: serve at getFunction (/home/hope/web/node_modules/undertaker/lib/helpers/normalizeArgs.js:15:5) at arrayMap (/home/hope/web/node_modules/lodash.map/index.js:140:21) at map (/home/hope/web/node_modules/lodash.map/index.js:1836:10) at normalizeArgs (/home/hope/web/node_modules/undertaker/lib/helpers/normalizeArgs.js:19:10) at Gulp.series (/home/hope/web/node_modules/undertaker/lib/series.js:13:14) at Object.<anonymous> (/home/hope/web/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中必须明确指出任务完成了。
1 2 3 4 5 6 7 8 9 10 11 |
[14:58:54] '<anonymous>' errored after 1.3 min [14:58:54] TypeError: done is not a function at FSWatcher.<anonymous> (/home/hope/web/gulpfile.js:125:9) at emitTwo (events.js:106:13) at FSWatcher.emit (events.js:191:7) at FSWatcher.<anonymous> (/home/hope/web/node_modules/chokidar/index.js:191:15) at FSWatcher._emit (/home/hope/web/node_modules/chokidar/index.js:233:5) at FSWatcher.<anonymous> (/home/hope/web/node_modules/chokidar/lib/nodefs-handler.js:263:16) at FSReqWrap.oncomplete (fs.js:123:15) [14:58:54] 'serve' errored after 1.35 min [14:58:54] 'default' errored after 1.35 min |
1 |
- 使用回调函数作为您的任务的第一个参数,只需在完成时调用该函数。
1 2 3 4 |
gulp.task('clean', (done)=>{ del(['build]); done(); }); |
- 告诉gulp任务完成的另一个常见方法是 返回(return) 一个流或者** Promise**:
1 2 3 4 5 |
gulp.task('minify:js', ()=>{ return gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); }); |
1 2 3 4 5 6 |
gulp.task('message', ()=>{ return new Promise(function(resolve, reject) { console.log("HTTP Server Started"); resolve(); }); }); |
浏览器同步刷新,而不是样式注入
我的Gulp 3文件没有问题,在HTML重建上进行刷新,并在CSS更改上进行闪电般的风格注入,但升级到Gulp 4后,浏览器现在会在CSS更改后重新加载。
- 需要以不同的方式做三件事。首先确保您将一个文件数组传递给Browsersync构造函数
1 2 3 4 5 6 7 8 9 10 11 |
var bsConfig = { server: 'build', files: [ 'build' ], open: false, }; gulp.task('browserSync', function() { bs.init(bsConfig); }); |
- 其次,如果你有任务bs.stream()结束styles,你可以删除它。
- 第三,当你想在你的开发服务器上进行实时风格注入时,你的watch和browserSync任务需要并行运行,而不是终止,就像这样:
1 |
gulp.task('serve', gulp.series('build', gulp.parallel('watch', 'browserSync'))); |