gulp 3.0 & 4.0 | watch task has to be a function问题

Posted 2020-12-18 shenzs

gulpfile.js

gulp.task(‘watch‘, function () {
    gulp.watch(‘./css/*.css‘,[‘css‘]);
    gulp.watch(‘./html/*.html‘,[‘html‘]);
    gulp.watch(‘./image/*.*‘,[‘image‘]);
    gulp.watch(‘./js/*.cjs‘,[‘js‘]);
});

报错：

[14:18:45] Error: watching css/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/Users/mac/Desktop/my_project/node_modules/gulp/index.js:31:11)
    at /Users/mac/Desktop/my_project/gulpfile.js:48:10
    at taskWrapper (/Users/mac/Desktop/my_project/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:425:14)
    at runBound (domain.js:438:12)
    at asyncRunner (/Users/mac/Desktop/my_project/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)

分析：

这个是由于require引入的包的版本问题导致的。在不同的版本里，接口参数发生了变化。在gulp4.0之后已经只能接受watch第二个参数必须为函数。详情请看官网

方法一：

改版本<4.0

方法二：

gulp.task(‘watch‘, function () {
    gulp.watch(‘./css/*.css‘,gulp.series([‘css‘]));这个列表只会匹配第一个
    gulp.watch(‘./html/*.html‘,gulp.series([‘html‘]));
    gulp.watch(‘./image/*.*‘,gulp.series([‘image‘])]);
    gulp.watch(‘./js/*.cjs‘,gulp.series([‘js‘]));
});

 

 

gulp.task(‘watch‘, function () {
    gulp.watch(‘./css/*.css‘,gulp.parallel([‘css‘]));这个列表可以 支持多个元素
    gulp.watch(‘./html/*.html‘,gulp.parallel([‘html‘]));
    gulp.watch(‘./image/*.*‘,gulp.parallel([‘image‘])]);
    gulp.watch(‘./js/*.cjs‘,gulp.parallel([‘js‘]));
});