Gulp 4 - 断言错误 [ERR_ASSERTION]: 任务未定义：未定义

Question

尝试运行默认任务时，我一直收到以下错误消息:

[10:52:59] Starting 'watchFiles'...
[10:52:59] 'watchFiles' errored after 1.11 ms
[10:52:59] AssertionError [ERR_ASSERTION]: Task never defined: undefined
    at getFunction (/Users/lynn/Siti/rg5/node_modules/undertaker/lib/helpers/normalizeArgs.js:15:5)
    at map (/Users/lynn/Siti/rg5/node_modules/arr-map/index.js:20:14)
    at normalizeArgs (/Users/lynn/Siti/rg5/node_modules/undertaker/lib/helpers/normalizeArgs.js:22:10)
    at Gulp.series (/Users/lynn/Siti/rg5/node_modules/undertaker/lib/series.js:13:14)
    at watchFiles (/Users/lynn/Siti/rg5/gulp/tasks/watch.js:10:10)
    at bound (domain.js:395:14)
    at runBound (domain.js:408:12)
    at asyncRunner (/Users/lynn/Siti/rg5/node_modules/async-done/index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)
[10:52:59] 'default' errored after 3.42 ms

这是我的注册任务：

[11:06:51] Tasks for ~/Siti/rg5/gulpfile.js
[11:06:51] ├─┬ default
[11:06:51] │ └─┬ <series>
[11:06:51] │   ├── watchFiles
[11:06:51] │   └── browserSync
[11:06:51] ├── browserSync
[11:06:51] ├── scripts
[11:06:51] ├── styles
[11:06:51] ├── previewDist
[11:06:51] └─┬ build
[11:06:51]   └─┬ <series>
[11:06:51]     ├── deleteDistFolder
[11:06:51]     ├── copyGeneralFiles
[11:06:51]     ├─┬ <parallel>
[11:06:51]     │ ├── styles
[11:06:51]     │ └── scripts
[11:06:51]     ├── useMin
[11:06:51]     └── optimizeImages

我的 Gulp 版本

CLI version: 2.2.0
Local version: 4.0.2

"watchFiles" 任务似乎是罪魁祸首，但我找不出问题所在。我已经查阅了所有其他类似错误的stackoverflow结果，但没有运气。
这是我的“gulpfile.js”文件：

const gulp = require("gulp");
const { watchFiles, browserSync } = require("./gulp/tasks/watch.js");
const scripts = require("./gulp/tasks/scripts.js");
const styles = require("./gulp/tasks/styles.js");

const {
  optimizeImages,
  deleteDistFolder,
  useMin,
  copyGeneralFiles,
  previewDist
} = require("./gulp/tasks/build.js");

// Register gulp tasks
exports.default = gulp.series(watchFiles, browserSync);
exports.browserSync = browserSync;
exports.scripts = scripts;
exports.styles = styles;
exports.previewDist = previewDist;
exports.build = gulp.series(
  deleteDistFolder,
  copyGeneralFiles,
  gulp.parallel(styles, scripts),
  useMin,
  optimizeImages
);

这里是我的watch.js模块，其中包含导致错误的watchFiles任务。

const gulp = require("gulp");
const browsersync = require("browser-sync").create();
const { styles } = require("./styles");
const scripts = require("./scripts");
const modernizrScript = require("./modernizr");

function watchFiles(done) {
  gulp.watch(
    "./app/assets/styles/sass/**/*.scss",
    gulp.series(styles, cssInject, browserSyncReload)
  );
  gulp.watch("./app/assets/scripts/**/*.js", scripts);
  gulp.watch("./app/*.html", browserSyncReload);
  done();
}

function browserSyncReload(cb) {
  browsersync.reload();
  cb();
}

// BrowserSync
function browserSync(cb) {
  browsersync.init({
    server: {
      baseDir: "app"
    },
    port: 3000
  });
  cb();
}

function cssInject() {
  return gulp.src("./app/temp/styles/base.css").pipe(browsersync.stream());
}

module.exports = { watchFiles, browserSync };

我真的卡住了，任何帮助都将不胜感激。 谢谢。

- LindaBytes

Answer 1

我找到了答案。问题出在我导入 styles 模块的方式上：由于它被导出为 module.exports = styles;，我不应该像这样导入它：const { styles } = require("./styles"); 而是应该这样导入：const styles = require("./styles"); 在 VSCode 上启用 TypeScript 检查帮助我找到了问题。

- LindaBytes