javascript - 如何在 gulp 中创建重复管道？

Question

我有一个 gulp 任务在 index.html 中注入(inject)几个依赖项，如下所示:

return gulp.src(config.serve.html)
          .pipe($.inject(gulp.src(prependSource(config.inject.source.indexes)), {
            read: false,
            starttag: config.inject.indexes,
            addRootSlash: false,
            addPrefix: prefix,
            ignorePath: ignore
          }))
          .pipe($.inject(gulp.src(managerList), {
            read: false,
            starttag: config.inject.managers,
            addRootSlash: false,
            addPrefix: prefix,
            ignorePath: ignore
          }))
          .pipe($.inject(gulp.src(prependSource(config.inject.source.directives)), {
            read: false,
            starttag: config.inject.directives,
            addRootSlash: false,
            addPrefix: prefix,
            ignorePath: ignore
          }))

          .pipe($.inject(gulp.src(prependSource(config.inject.source.routes)), {
            read: false,
            starttag: config.inject.routes,
            addRootSlash: false,
            addPrefix: prefix,
            ignorePath: ignore
          }))
          .pipe($.inject(gulp.src(prependSource(config.inject.source.css)), {
            read: false,
            starttag: config.inject.css,
            addRootSlash: false,
            addPrefix: prefix,
            ignorePath: ignore
          }))


          .pipe($.size())
          .pipe(gulp.dest(dest));
};

如您所见，所有管道都以某种方式重复(managerList 除外)。所以我想要的是在一系列注入(inject)的帮助下将重复的管道合并为一个管道。如何实现同样的目标？

Answer 1

gulp.src 返回一个流(每个 .pipe 也是如此)。如果您考虑每个 .pipe 调用在做什么，您可以简单地将它变成一个 for 循环。像这样:

config = { /* your config object */ };

var stream = gulp.src(/* source glob */);
for (var i = 0; i < injects.length; i++) {
  stream = stream.pipe($.inject(gulp.src(prependSource(config.inject.source[i])), config.inject.starttag[i]));
}

stream.pipe($.size())
      .pipe(gulp.dest(dest));

return stream;