Gulp 5中如何在执行任务前等待异步deploy_data函数完成

问题场景 #

使用Windows系统、Gulp 5，配置"type": "module"，拆分gulpfile为多文件结构，希望deploy_data在所有导出任务执行前完成全局数据加载，避免每个任务都手动配置前置依赖，但原代码中异步的deploy_data总是在任务执行后才完成，导致任务无法获取到data中的内容。

文件结构：

gulpfile.js
tasks/clean.js
tasks/deploy_data.js
data/path.js
data/other.js

核心问题 #

1. 原代码中gulp.series(deploy_data)仅创建任务序列，未实际执行；
2. 异步的deploy_data未被等待，导致任务导出和执行时data仍为空；
3. deploy_data中缺少fs模块的导入，会导致运行报错。

解决方案 #

通过异步立即执行函数确保deploy_data完全执行后再导出所有任务，同时修复代码中的依赖缺失问题。

1. 修复deploy_data.js的依赖问题 #

补全fs模块导入，移除不必要的回调参数（改用异步函数的返回值处理）：

import fs from 'node:fs';
import path from 'node:path';
import { pathToFileURL } from 'node:url';

async function deploy_data() {
  const dir = path.join(process.cwd(), 'data');
  const files = fs.readdirSync(dir, { withFileTypes: true })
    .filter(item => item.isFile())
    .map(item => item.name);

  for (const file of files) {
    const moduleUrl = pathToFileURL(path.join(dir, file)).href;
    global.data[path.parse(file).name] = (await import(moduleUrl)).default;
  }
}

export default deploy_data;

2. 修改gulpfile.js实现预加载 #

用异步立即执行函数包裹逻辑，等待deploy_data完成后再导出任务：

import gulp from 'gulp';
import clean from './tasks/clean.js';
import deploy_data from './tasks/deploy_data.js';

global.data = {};

// 先完成全局数据加载，再导出任务
(async () => {
  await deploy_data();
  
  // 导出所有任务
  Object.assign(exports, {
    clean,
    // 其他任务...
  });
})();

3. 任务文件无需修改 #

tasks/clean.js保持原有逻辑即可，此时执行任务时global.data已完成加载：

function clean(cb) {
  console.log(data.path.src); // 正常获取路径
  cb();
}

export default clean;

效果验证 #

执行gulp clean时，deploy_data会在任务启动前完成所有数据加载，clean任务可以正常读取data.path.src的内容。

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