Gulp 4 个多个异步子任务

Question

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

以下任务未完成：构建，copy:default
您是否忘记发出异步完成信号？

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'));

Answer 1

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

查看 merge-stream and https://mariusschulz.com/blog/merging-two-gulp-streams 实际 return 流。

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'))
  ); 
});

Answer 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;
});

Gulp 4 个多个异步子任务

Gulp 4 multiple async subtasks

javascript

gulp