如何修复Gulp中的‘Task function must be specified’错误？

阿华AIGC实验室

2026-5-12

解决Gulp中'Task function must be specified'错误并实现CSS修改自动刷新页面

嘿，这个错误我之前也碰到过！问题出在你用的是Gulp 4.x版本，但代码还是沿用了Gulp 3.x的旧语法——Gulp 4.x对任务定义和任务调用的规则做了很大改动，不再支持数组形式指定任务依赖，这就是你看到"Task function must be specified"的原因。

另外，我还注意到你的代码里有个小乌龙：jshint任务居然在检查CSS文件，这可是用来校验JS代码的工具哦😅。还有，要实现修改CSS后页面自动更新，光靠watch编译还不够，得加上浏览器同步工具来通知页面刷新。

下面是修改后的完整代码，我会逐点解释改动：

首先，先确保你安装了所需依赖（包括新增的browser-sync）：

npm install gulp browser-sync gulp-jshint gulp-changed gulp-rename gulp-uglifycss gulp-sass gulp-cssimport --save-dev

然后是修改后的Gulpfile：

const gulp = require("gulp");
const jshint = require("gulp-jshint");
const changed = require("gulp-changed");
const rename = require("gulp-rename");
const minifyCSS = require("gulp-uglifycss");
const sass = require("gulp-sass");
const cssImport = require("gulp-cssimport");
const browserSync = require("browser-sync").create();

// 编译并压缩CSS的任务（改用函数式定义，Gulp 4.x推荐写法）
function compileCSS() {
  return gulp
    .src("src/css/*.css")
    .pipe(changed("public/assets/css/"))
    .pipe(cssImport())
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest("public/assets/css/"))
    .pipe(browserSync.stream()); // 关键：编译完后通知BrowserSync注入更新的CSS，无需整页刷新
}

// JS代码检查任务（修正了源文件为JS，之前的CSS是错误的）
function lintJS() {
  return gulp
    .src("src/js/*.js")
    .pipe(jshint())
    .pipe(jshint.reporter("default"));
}

// 启动BrowserSync本地服务器，实现自动刷新
function serve() {
  browserSync.init({
    server: {
      baseDir: "./public" // 这里填你的网站根目录，根据实际情况调整
    }
  });

  // 监听CSS文件变化，自动执行编译任务
  gulp.watch("src/css/*.css", compileCSS);
  // 监听HTML文件变化，自动刷新页面
  gulp.watch("public/*.html").on("change", browserSync.reload);
  // 监听JS文件变化，先做代码检查再刷新页面
  gulp.watch("src/js/*.js", gulp.series(lintJS, browserSync.reload));
}

// 导出任务：默认任务先执行JS检查，再启动服务和监听
exports.default = gulp.series(lintJS, serve);
// 单独导出编译CSS的任务，方便手动执行
exports.compileCSS = compileCSS;
// 单独导出JS检查任务
exports.lintJS = lintJS;

关键改动说明：

适配Gulp 4.x语法：
- 放弃了旧的gulp.task()写法，改用函数定义任务，最后通过exports导出，这是Gulp 4.x的标准写法。
- 用gulp.series()来按顺序执行任务（比如默认任务先跑代码检查，再启动服务），替代了Gulp 3.x的数组依赖方式。
- 移除了gulp-watch插件：Gulp 4.x内置的gulp.watch已经足够强大，不需要额外依赖。
实现自动刷新页面：
- 加入了browser-sync工具，它会启动一个本地服务器，当CSS编译完成后，用browserSync.stream()直接把更新的CSS注入到页面中，不需要刷新整个页面；HTML或JS变化时则触发整页刷新。
修正乌龙错误：
- 把jshint任务的源文件从CSS改成了JS，终于让它干回了自己的本职工作😎。