如何从 GULP 将变量值注入 JS 文件答案

【问题标题】：How to inject variable value into JS file from GULP如何从 GULP 将变量值注入 JS 文件
【发布时间】：2016-03-13 20:28:25
【问题描述】：

希望这是一个快速的问题。

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

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript gulp javascript-objects gulp-header

【解决方案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
}

【讨论】：

这就是答案。另一种选择是gulp-preprocess。

【解决方案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;
   },

它在调用时运行并设置对象内部的时间戳。

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

如果您对改进它有任何想法，我很想听听！

【讨论】：