javascript - gulp-concat 和 lazypipe 的这种组合在使用 gulp 4 时会导致错误吗？

Question

我正在从 Gulp 3 升级到 4，但我遇到了一个错误:

The following tasks did not complete: build
Did you forget to signal async completion?

我明白它在说什么，但不明白为什么这段代码会触发它。

无论是否出错，任务完成(文件被连接并写入目标)。在没有 lazypipe 的情况下执行相同的代码不会导致错误，并且在 lazypipe 中删除连接也可以修复错误。

将整个东西包装在创建流的东西中(比如合并流)可以解决这个问题。我猜 gulp-concat 和 lazypipe 之间的交互阻止了正确返回流。

这是(简化的)任务:

gulp.task('build', function() {
    var dest = 'build';

    var buildFiles = lazypipe()
        .pipe(plugins.concat, 'cat.js') // Task will complete if I remove this
        .pipe(gulp.dest, dest);

    // This works
    // return gulp.src(src('js/**/*.js'))
    //     .pipe(plugins.concat('cat.js'))
    //     .pipe(gulp.dest(dest));

    // This doesn't (unless you wrap it in a stream-making function)
    return gulp.src(src('js/**/*.js'))
        .pipe(buildFiles());
});

感谢任何建议!

Answer 1

这是一个 known issue在 gulp 4 中使用 lazypipe 时，它不会在不久的将来被修复。引用该问题:

OverZealous commented on 20 Dec 2015
As of now, I have no intention of making lazypipe work on Gulp 4.

据我所知，这个问题是由 gulp 4 使用 async-done 引起的。这说明了它的流支持:

Note: Only actual streams are supported, not faux-streams; Therefore, modules like event-stream are not supported.

当您使用 lazypipe() 作为最后一个管道时，您得到的是一个流，它没有您在 gulp 中使用流时通常拥有的许多属性。您可以通过记录流来亲眼看到这一点:

// console output shows lots of properties
console.log(gulp.src(src('js/**/*.js'))
  .pipe(plugins.concat('cat.js'))
  .pipe(gulp.dest(dest))); 

// console output shows much fewer properties
console.log(gulp.src(src('js/**/*.js'))
  .pipe(buildFiles())); 

这可能是 gulp 将第二个流视为“伪流”并且无法正确检测流何时结束的原因。

此时您唯一的选择是某种解决方法。最简单的解决方法(不需要任何额外的包)是向您的任务添加一个回调函数 cb 并监听 'end' 事件:

gulp.task('build', function(cb) {
  var dest = 'build';

  var buildFiles = lazypipe()
   .pipe(plugins.concat, 'cat.js') 
   .pipe(gulp.dest, dest);

  gulp.src(src('js/**/*.js'))
   .pipe(buildFiles())
   .on('end', cb);
});

或者，在 buildFiles() 之后添加任何 .pipe() 应该可以解决这个问题，即使它实际上并没有像 gutil.noop() 这样的操作。 :

var gutil = require('gulp-util');

gulp.task('build', function() {
  var dest = 'build';

  var buildFiles = lazypipe()
    .pipe(plugins.concat, 'cat.js') 
    .pipe(gulp.dest, dest);

  return gulp.src(src('js/**/*.js'))
    .pipe(buildFiles())
    .pipe(gutil.noop());
});