使用merge2流式处理多个Gulp任务时触发TypeError错误

我一眼就看出问题出在哪了——你用了forEach来生成处理流，但forEach根本不会返回任何值（默认返回undefined），而merge2需要接收的是实际的可读流或者流的数组。你把undefined传给它，自然就触发了_readableState的读取错误，哪怕你的任务实际功能能跑起来。

问题根源拆解 #

看你的代码里这几部分：

var imgmin = bannerImages.forEach(function(size){ ... })
var imgretina = bannerretina.forEach(function(size){ ... })
var webPimg = bannerImages.forEach(function(size){ ... })

forEach只是遍历数组执行回调，不会收集回调的返回值，所以imgmin、imgretina、webPimg全都是undefined，把这三个undefined传给merge()，merge2当然不知道怎么处理。

修正方案 #

把forEach换成map——map会遍历数组并收集每个回调的返回值，最终给你一个包含所有处理流的数组。另外我还发现两个小问题顺便给你修正了：

1. imagemin的use配置重复写了两次，后面的会覆盖前面的，要合并成一个数组
2. bannerretina变量没定义，我假设它和bannerImages是同一个数组（如果不是你自己替换成实际的数组就行）

修正后的完整代码：

gulp.task('mergeimg',function(){ 
  var bannerImages = [2000,1600,1200,800,533];
  // 确保bannerretina已定义，这里假设和bannerImages一致，按需修改
  var bannerretina = [2000,1600,1200,800,533];

  // 用map替代forEach，收集所有处理流
  var imgmin = bannerImages.map(function(size){ 
    return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
      .pipe(imageResize({ width: size, crop:true }))
      .pipe(imagemin({ 
        progressive: true, 
        // 合并use数组，避免覆盖
        use: [pngquant(), imageminMozjpeg({quality:85})]
      }))
      .pipe(rename(function(path){ path.basename += '_'+size }))
      .pipe(debug())
      .pipe(gulp.dest('../html/assets/temp/' )) 
  }); 

  var imgretina = bannerretina.map(function(size){ 
    return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
      .pipe(imageResize({ width: size * 2, crop:true }))
      .pipe(imagemin({ 
        progressive: true, 
        use: [pngquant(), imageminMozjpeg({quality:85})]
      }))
      .pipe(rename(function(path){ path.basename += '_'+size+'@2x' }))
      .pipe(debug())
      .pipe(gulp.dest('../html/assets/temp/' )) 
  }); 

  var webPimg = bannerImages.map(function(size){ 
    return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
      .pipe(webp())
      .pipe(rename(function(path){ path.basename += '_'+size }))
      .pipe(debug())
      .pipe(gulp.dest('../html/assets/temp/' )) 
  }); 

  // merge接收三个流数组，合并成一个流
  var mergedStream = merge(...imgmin, ...imgretina, ...webPimg); 
  return mergedStream; 
});

额外说明 #

修正后，imgmin、imgretina、webPimg都会变成包含对应处理流的数组，用扩展运算符...把数组里的流展开传给merge()，merge2就能正确处理所有流的合并，不会再抛出那个_readableState的错误了。而且你之前的imagemin配置里，use数组被覆盖的问题也解决了，pngquant和mozjpeg会一起生效。

内容的提问来源于stack exchange，提问作者Amitabha Ghosh