如何在Gulp 5中创建并使用clean任务？报错问题求助

尝试在Gulpfile中创建clean任务时遇到两类错误：

1. 使用require('del')时，触发ESM模块兼容错误
2. 使用import('del')时，提示TypeError: del is not a function

当前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);

使用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'
}

使用import('del')时的错误日志：

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

当前package.json的devDependencies：

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

核心问题分析 #

• del@7.x是纯ESM模块，无法通过CommonJS的require()直接导入
• 动态import('del')返回的是Promise对象，而非直接的函数引用，且del的导出是default，需要解构获取

修改步骤 #

1. 修正clean任务的异步处理与del导入
   将clean函数改为异步函数，在函数内部通过await获取del的默认导出，并等待删除操作完成
2. 修复copy任务的异步问题
   原copy任务直接调用cb()会导致任务在文件复制完成前就标记为结束，需改为返回流让Gulp跟踪任务状态

修改后的完整代码 #

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

async function clean() {
    // 动态导入del并获取默认导出
    const { default: del } = await import('del');
    // 等待删除操作完成
    await del(['node_modules/bootstrap/dist']);
}

function copy() {
    // 返回流让Gulp跟踪任务完成状态
    return src('node_modules/bootstrap/dist/css/*')
        .pipe(dest('wwwroot/lib/bootstrap/dist/css', { overwrite: true }))
        .on('end', () => {
            src('node_modules/bootstrap/dist/js/*')
                .pipe(dest('wwwroot/lib/bootstrap/dist/js', { overwrite: true }));
        });
}

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

补充说明 #

• 如果需要同时处理多个独立流，可使用merge-stream包合并流，确保Gulp能正确跟踪所有异步操作
• 若想统一使用ESM模块，可将Gulpfile重命名为gulpfile.mjs，并将所有require改为import语法，同时在package.json中添加"type": "module"

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