Gulp 4监听任务报错：watch task has to be a function 求解决

错误原因 #

你遇到的报错源于Gulp 4对任务机制的改动：

• gulp.watch 的第二个参数不再支持字符串数组（Gulp 3写法），必须传入函数或由gulp.series/parallel生成的任务流
• 代码里监听触发的sass任务不存在，你实际定义的SCSS编译任务是buildStyles

修改后的完整代码 #

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function buildStyles() {
  return gulp.src('./assets/css/app.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('.'));
};

exports.buildStyles = buildStyles;

// 改用Gulp 4标准的函数形式定义watch任务
function watch() {
  // 文件变化时触发指定的编译任务
  gulp.watch('./assets/css/app.scss', gulp.series(buildStyles));
};

exports.watch = watch;

// 默认任务启动监听
exports.default = gulp.series(watch);

关键改动说明 #

1. 把旧的gulp.task('watch')改为函数形式watch()并导出，符合Gulp 4的任务导出规范
2. gulp.watch的回调替换为gulp.series(buildStyles)，明确指定文件变更时执行的编译任务
3. 默认任务直接调用导出的watch任务，保持逻辑清晰

运行gulp命令即可启动监听，修改SCSS文件后会自动触发编译。

内容的提问来源于stack exchange，提问作者RoccoP