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

时间:2015-12-08 19:08:45

标签: javascript gulp javascript-objects gulp-header

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

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

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

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

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:12)

您使用的是任何类型的模块吗? 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
}

答案 1 :(得分:1)

O.K。,所以我想出了一个解决方法,让我能够成为我想去的地方。第一个是使用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;
   },

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

似乎应该有一种更简单的方法来做到这一点,但就目前而言,这是有效的。

如果您对改善它有任何想法,我很乐意听到它们!