如何在 Gulp 版本 5 中创建和使用干净任务？

Question

我正在尝试在我的 gulpfile 中创建一个干净的任务，当前如下所示：

const { series, src, dest } = require('gulp');
const del = import('del');

function clean() {
    del(['node_modules/bootstrap/dist']);
}

function copy(cb) {
    src('node_modules/bootstrap/dist/css/*').pipe(dest('wwwroot/lib/bootstrap/dist/css', { overwrite: true }));
    src('node_modules/bootstrap/dist/js/*').pipe(dest('wwwroot/lib/bootstrap/dist/js', { overwrite: true }))
    cb();
}

exports.build = copy;
exports.clean = clean;
exports.default = series(clean, copy);

当我运行 gulp 时，我得到这个：

PS C:\projects\Mtcsw> gulp
[08:42:56] Using gulpfile C:\projects\Mtcsw\gulpfile.js
[08:42:56] Starting 'default'...
[08:42:56] Starting 'clean'...
[08:42:56] 'clean' errored after 952 μs
[08:42:56] TypeError: del is not a function
    at clean (C:\projects\Mtcsw\gulpfile.js:6:5)
    at bound (node:domain:432:15)
    at runBound (node:domain:443:12)
    at asyncRunner (C:\projects\Mtcsw\node_modules\async-done\index.js:52:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[08:42:56] 'default' errored after 3.92 ms

早些时候，我没有使用 import('del')，而是使用 require('del') 并得到了这个：

PS C:\projects\Mtcsw> gulp
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\projects\Mtcsw\node_modules\del\index.js from C:\projects\Mtcsw\gulpfile.js not supported.
Instead change the require of index.js in C:\projects\Mtcsw\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\projects\Mtcsw\gulpfile.js:3:13) {
  code: 'ERR_REQUIRE_ESM'
}

作为参考，我的 package.json 的 devDependency 如下所示：

    "bootstrap": "5.3.3",
    "eslint": "^9.2.0",
    "gulp": "5.0.0",
    "del": "7.1.0"

令我感到奇怪的是，当我查看 https://www.npmjs.com/package/gulp 中的示例时，我正在做他们所展示的事情。 所以我试图按照说明进行操作，但显然遗漏了一些东西。 我需要改变什么？

Answer 1

我认为这里的问题是

del

v7.1.0 使用 ES 模块语法。 v7.0.0 之前的每个版本都使用 CommonJS，Gulp 使用 CommonJS 来导入模块。 你根本不应该混合使用 ES 模块和 CommonJS。恢复到

del

v6.1.1 可能会解决您的问题。

如果您更喜欢使用 ES 模块，您可以将 gulpfile 保存为 'gulpfile.mjs' 并使用相关语句进行导入。

这也会影响脚本中的其他模块。 Gulp 的很多（如果不是大多数）模块都是使用 CommonJS 构建的。

话虽如此，如果您绝对需要使用两种语法调用模块，您可以使用像 Babel 这样的转译器或像 Webpack 这样的捆绑器来确保兼容性。