Gulp 4 多个异步子任务答案

【问题标题】：Gulp 4 multiple async subtasksGulp 4 多个异步子任务
【发布时间】：2020-03-12 08:45:33
【问题描述】：

如何在 Gulp 任务中运行多个异步子任务？通常，此任务运行并开始复制文件，但最后会引发错误。

以下任务未完成：构建、复制：默认
您是否忘记发出异步完成信号？

gulp.task('copy:default', () => {

  const fonts = gulp.src(['src/fonts/**/*'])
    .pipe(gulp.dest('dist/fonts'));
  const images = gulp.src(['src/images/**/*'])
    .pipe(gulp.dest('dist/images'));
  const scripts = gulp.src(['src/scripts/**/*'])
    .pipe(gulp.dest('dist/scripts'));

  return ['fonts', 'images', 'scripts']

});

我是这样使用的：

gulp.task('build', gulp.series('clean:dist', 'copy:default', 'sass'));

【问题讨论】：

如果我是你，我会将每个 gulp.src 分隔成一个返回 Promise 的函数，然后调用 promise 数组中的所有函数。然后Promise.all 与所述数组。
我确实喜欢这样：jsfiddle.net/Loa6m4xh，但仍然像以前一样出现错误。
您的代码中有几个错误。我在一个新的答案中为你制定了一个可行的解决方案。

标签： javascript gulp

【解决方案1】：

这个return ['fonts', 'images', 'scripts'] 只返回一个字符串数组，这还不够。

查看merge-stream 和https://mariusschulz.com/blog/merging-two-gulp-streams 以实际返回流。

const merge = require('merge-stream');

gulp.task('copy:default', () => {

  const fonts = gulp.src(['src/fonts/**/*'])
    .pipe(gulp.dest('dist/fonts'));
  const images = gulp.src(['src/images/**/*'])
    .pipe(gulp.dest('dist/images'));
  const scripts = gulp.src(['src/scripts/**/*'])
    .pipe(gulp.dest('dist/scripts'));

  // return ['fonts', 'images', 'scripts']
  return merge(fonts, images, scripts);

});

或

gulp.task('copy:default', () => {

  return merge(
    gulp.src(['src/fonts/**/*'])
      .pipe(gulp.dest('dist/fonts')),
    gulp.src(['src/images/**/*'])
      .pipe(gulp.dest('dist/images')),
    gulp.src(['src/scripts/**/*'])
      .pipe(gulp.dest('dist/scripts'))
  ); 
});

【讨论】：

【解决方案2】：

这是一个可行的解决方案：

gulp.task('copy:default', () => {
  const finalPromise = new Promise(finalResolve => {

    const fonts = new Promise(resolve => {
      gulp.src(['src/fonts/**/*'])
        .pipe(gulp.dest('dist/fonts'))
        .on('end', resolve);
    })

    const images = new Promise(resolve => {
      gulp.src(['src/images/**/*'])
        .pipe(gulp.dest('dist/images'))
        .on('end', resolve)
    })

    const scripts = new Promise(resolve => {
      gulp.src(['src/scripts/**/*'])
        .pipe(gulp.dest('dist/scripts'))
        .on('end', resolve);
    })

    Promise.all([fonts, images, scripts]).then(result => {
      finalResolve(result);
    });
  });

  return finalPromise;
});

【讨论】：