如何从GULP将变量值注入到JS文件中

Question

希望这是一个简单的问题。

我想要做的是在使用GULP构建JS文件时，将时间戳添加到Javascript对象中。基本上，在"file.js"中，我有一个对象，我想要让object.timeStamp等于GULP构建的时间。

我目前正在使用gulp-header向文件顶部添加时间戳，但是我被要求将时间戳添加到对象的属性中。

我的想法是从GULP中注入该值，但我目前找到的所有注入插件都是用于将一个文件的内容注入到目标文件中。

非常感谢任何帮助。

- Andrew R.

Answer 1

你是否在使用任何类型的模块？例如ES6模块、AMD、CommonJS等等？

如果是这样，你可以使用Gulp生成一个config模块，在其中注入任何想要的变量。它看起来可能是这样的：

config.tmpl.js

module.exports = <%= config %>

配置Gulp任务

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');

gulp.task('config', function() {
  return gulp.src('path/to/config.tmpl.js')
    .pipe(template({config: JSON.stringify({
      timeStamp: new Date()
    })}))
    .pipe(rename('config.js'))
    .pipe(gulp.dest('path/to/config.js'));
});

最后，在您的 JS 文件中：

var config = require('path/to/config.js');

var object = {
  timeStamp: config.timeStamp
}

- Eloy Pineda

---

那就是答案。另一个选择是 gulp-preprocess。 - Julian

Answer 2

好的，我想出了一个解决方法，让我达到了想要的目标。首先使用gulp-header将变量声明插入我的JavaScript文件中，使用以下代码：

在GULP中：

    var d = new Date();
    .pipe(header("var timeStamp = '" + d +"';"))

然后，在我的Javascript文件中，我在对象中设置了一个属性，该属性是一个函数，并通过使用gulp-header从上面注入的timeStamp变量获取值来设置我正在寻找的timeStamp属性，例如：

在JS文件中，头部功能插入了以下内容：

    var timeStamp = 'Tue Dec 08 2015 15:15:11 GMT-0800 (PST)';

我的JS对象中的函数很简单，就是这样：

   ts: function(){
    object.timeStamp = timeStamp;
   },

当调用时，它会运行并在对象内设置时间戳。

似乎应该有更简单的方法来做到这一点，但现在这个方法可以工作。

如果你有任何改进的想法，我很乐意听取！

- Andrew R.