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 将 lazypipe 与 gulp 4 一起使用时出现的问题，近期不会修复。引自该期：

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 认为第二个流是 "faux-stream" 并且没有正确检测流何时结束的原因。

此时您唯一的选择是某种解决方法。最简单的解决方法（不需要任何额外的包）是向您的任务添加一个回调函数 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 实现完成的任务。

我不得不说我现在不想念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(...), ...); 
}

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

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

What about this combination of gulp-concat and lazypipe is causing an error using gulp 4?

javascript

build-tools

gulp

gulp-concat

gulp-4