Gulp

Question

我正在处理一个 Gulp 文件。在这个文件中，我有两个函数执行两个独立的任务。使用以下内容调用这些函数：

gulp.task('build', gulp.parallel(buildJs, buildCss));

当执行 build 任务时，我收到以下错误：

以下任务未完成：default、build、buildCss 您是否忘记发出异步完成信号？

我的buildCss函数是这样定义的：

const files= [
    { input:'core.scss', output:'core.css' },
    { input:'theme.scss', output:'theme.css' },
    { input:'controls.scss', output:'controls.css'}
];

function buildCss() {
    files.forEach(function(f) {
        return gulp.src(`./scss/${f.input}`)
            .pipe(sass())
            .pipe(concat(f.output))
            .pipe(gulp.dest('./'))
        ;
    });
}

我怀疑循环的每次迭代都在旋转它自己的线程。所以，Gulp 永远不知道 buildCss 什么时候结束。这意味着，不知何故，我需要知道何时生成所有 .css 文件并调用一些东西。如果我的理解是正确的，我不确定如何做最后一块。

如何解决 Gulp 中循环中项目的异步完成？

谢谢！

Answer 1

您可以使用 .on('end') 并为每个任务创建一个 Promise，然后检查所有的 Promise 是否正常，像这样应该可以工作：

function buildCss() {
  return Promise.all(files.map(task => {
    return new Promise((resolve,reject) => {
      return gulp.src(`./scss/${task.input}`)
        .pipe(sass())
        .pipe(concat(task.output))
        .pipe(gulp.dest('./'))
        .on('end', () => resolve())
        ;
    });
  }));
}

Gulp - 带循环的异步完成

Gulp - Async Completion with a Loop

javascript