問題描述

我有一個 gulp 任務(wù)在 index.html 中注入幾個依賴項(xiàng):

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));
};

如您所見，所有管道都以某種方式重復(fù)(managerList 除外).所以我想要的是在一系列注入的幫助下將重復(fù)管道合并到一個管道中.如何達(dá)到同樣的效果?

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 調(diào)用在做什么，您可以簡單地將其轉(zhuǎn)換為 for 循環(huán).像這樣的:

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;

這篇關(guān)于如何在 gulp 中創(chuàng)建重復(fù)管道?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！