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


How can I insert content into a file during a gulp build?

我设法使用名为gulp-insert的gulp插件完成任务，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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());
});

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

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

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

占位符在字符串中，因此对于其他先处理文件的gulp插件而言，它是有效的JavaScript。 gulpInsert实用程序允许我像这样插入配置。

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

此方法有效，但感觉有些不客气。更不用说它必须缓冲整个捆绑的文件，以便我可以执行该操作。有没有更优雅的方式来完成同一件事？最好是一种允许流保持平稳流动而又不会在最后缓冲整个束的方法？谢谢！

相关讨论

您是否已检查gulp-replace-task？

类似

1
2
3
4
5
6
7
8
9
10
11
[...]
.pipe(gulpSourcemaps.init())
.pipe(replace({
  patterns: [{
    match: '{{{appConfigObj}}}',
    replacement: config
  }],
  usePrefix: false
})
.pipe(gulpUglify())
[...]
相关讨论

诚然，这也有点怪，但也许稍微好点...我在React项目中使用envify和gulp-env。您可以执行以下操作。

gulpfile.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var config = require('config');
var envify = require('envify');

gulp.task('env', function () {
    env({
        vars: {
            APP_CONFIG: JSON.stringify(config)
        }
    });
});

gulp.task('compile-js', ['env'], function () {
  // ... replace `gulp-insert` with `envify`
});

工厂：

1
2
3
4
angular.module('app')
  .factory('appConfig', function () {
    return process.env.APP_CONFIG;
  });
相关讨论