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

Question

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

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

我明白它在说什么，但无法理解为什么这段代码会触发它。

无论是否出错，任务都会完成(文件被连接并写入 dest(。在没有 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

这是将

lazypipe与 gulp 4 一起使用时的已知问题，并且在不久的将来不会修复。引用该期内容：

过热心评论 2015
年12月20日 截至目前，我无意在 Gulp 4 上制作懒惰管。

据我所知，这个问题是由 gulp 4 使用async-done的事实引起的，它对其流支持有这样的说法：

注意：仅支持实际流，不支持假流;因此，不支持event-stream等模块。

当您使用 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());
});

Answer 2

所以错误很明显。我不得不做一些重构才能让 gulp 4 再次工作。我最终制作了一些额外的方法，这些方法采用源和目标，并执行以前由我的 lazypipe 实现完成的任务。

我不得不说我现在不会想念懒惰的管道。这只是一种不同的方法。我最终确实完成了一些额外的任务，但它们使用的标准方法，如下例所示：

// previously a lazypipe, now just a method to return from a gulp4 task 
const _processJS = (sources, destination) => {
  return src(sources)
    .pipe(minify(...))
    .pipe(uglify(...))
    .pipe(obfuscate(...))
    .pipe(whatever())
    .pipe(dest(destination));
};
const jsTaskXStep1 = ()=>{
  return src(...).pipe(...).pipe(...).pipe(dest(...));
};
const jsTaskXStep2 = ()=>{
  return _processJS(['./src/js/x/**/*.js'], './dist/js');
};
const jsTaskYStep1 = ()=>{
  return src(...).pipe(...).pipe(...).pipe(dest(...));
};
const jsTaskYStep2 = ()=>{
  return _processJS(['./src/js/y/**/*.js'], './dist/js');
};
const jsTaskX = series(jsTaskXStep1, jsTaskXStep2);
const jsTaskY = series(jsTaskYStep1, jsTaskYStep2);
module.exports = {
  js: parallel(jsTaskX, jsTaskY),
  css: ...,
  widgets: ...,
  ...
  default: parallel(js, css, widgets, series(...), ...); 
}

所以基本上你可以把你的懒惰管道的东西放在像这个例子中_processJS这样的方法中。然后创建使用它的任务，并将所有内容与gulp系列和并行相结合。希望这对一些正在为此苦苦挣扎的人有所帮助。