javascript - 如何在 gulp 构建期间将内容插入文件？

Question

我设法使用名为 gulp-insert 的 gulp 插件完成了我的任务像这样:

gulp.task('compile-js', function () {
  // Minify and bundle client scripts.
  var scripts = gulp.src([
    srcDir + '/routes/**/*.js',
    srcDir + '/shared/js/**/*.js'
  ])
    // Sort angular files so the module definition appears
    // first in the bundle.
    .pipe(gulpAngularFilesort())
    // Add angular dependency injection annotations before
    // minifying the bundle.
    .pipe(gulpNgAnnotate())
    // Begin building source maps for easy debugging of the
    // bundled code.
    .pipe(gulpSourcemaps.init())
    .pipe(gulpConcat('bundle.js'))
    // Buffer the bundle.js file and replace the appConfig
    // placeholder string with a stringified config object.
    .pipe(gulpInsert.transform(function (contents) {
      return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config));
    }))
    .pipe(gulpUglify())
    // Finish off sourcemap tracking and write the map to the
    // bottom of the bundle file.
    .pipe(gulpSourcemaps.write())
    .pipe(gulp.dest(buildDir + '/shared/js'));

  return scripts.pipe(gulpLivereload());
});

我正在做的是读取我们应用程序的配置文件，该文件由 config 管理。 npm 上的模块。使用 var config = require('config'); 从服务器端代码获取我们的配置文件很简单，但我们是一个单页应用程序，经常需要访问客户端。为此，我将配置对象填充到 Angular 服务中。

这是 gulp 构建之前的 Angular 服务。

angular.module('app')
  .factory('appConfig', function () {
    return '{{{appConfigObj}}}';
  });

占位符位于字符串中，因此对于其他一些首先处理文件的 gulp 插件来说，它是有效的 JavaScript。 gulpInsert 实用程序让我可以像这样插入配置。

.pipe(gulpInsert.transform(function (contents) {
  return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config));
}))

这可行，但感觉有点 hacky。更不用说它必须缓冲整个捆绑文件，以便我可以执行操作。有没有更优雅的方式来完成同样的事情？最好是一种允许流保持平稳流动而不在最后缓冲整个 bundle 的方法？谢谢!

Answer 1

您检查过gulp-replace-task ?

类似

[...]
.pipe(gulpSourcemaps.init())
.pipe(replace({
  patterns: [{
    match: '{{{appConfigObj}}}',
    replacement: config
  }],
  usePrefix: false
})
.pipe(gulpUglify())
[...]