如何在 gulp 中创建重复管道?

问题描述

我有一个 gulp 任务在 index.html 中注入几个依赖项:

I have a gulp task to inject several dependencies in index.html as this :

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 除外).所以我想要的是在一系列注入的帮助下将重复管道合并到一个管道中.如何达到同样的效果?

As you can see, all the pipes are in repeating in some fashion (except the managerList). So what I want is to consolidate the repeating pipes into one single pipe, with the help of an array of injects. How to achieve the same?

推荐答案

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

gulp.src returns a stream (as does each .pipe). If you think about what each .pipe call is doing, you can simply turn it into a for loop. Something like this:

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;

这篇关于如何在 gulp 中创建重复管道?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！