动态地将版本号添加到目标输出文件w/grunt

Question

我有一个package.json包含我们版本号的文件,例如:

{
    name: "myproject"
    version: "2.0"
}

我的目标是动态地将package.json文件中的版本号添加到输出文件中.例如,在javascript中我不想手动更新版本号,但是想要在每次grunt构建之后生成类似的东西:

/* My Project, v2.0 */
window.myProject = {
    version: "2.0"
};

在我的Gruntfile.js配置中有一种简单的方法吗？

Answer 1

我实现了:https://github.com/erickrdch/grunt-string-replace

在我的源css/js文件中,我使用的文本{{ VERSION }}被替换为package.json文件中设置的版本号.以下是我添加的配置Gruntfile.js.

'string-replace': {
  version: {
    files: {
      // the files I did string replacement on
    },
    options: {
      replacements: [{
        pattern: /{{ VERSION }}/g,
        replacement: '<%= pkg.version %>'
      }]
    }
  }
},
pkg: grunt.file.readJSON('package.json'),

Answer 2

我认为你只想做一些技巧,让页面无法使用浏览器可能拥有的缓存文件,到目前为止,这种跨浏览器的唯一方法是在href网址上放置一些内容.比如"app.v2_2.js"或"app.js？ver = 22".所以我用这个笨蛋的npm包:

https://www.npmjs.org/package/grunt-cache-breaker

默认情况下,它只为您的javascript添加一个参数,在几乎所有情况下都是不使用缓存所需的东西,但即使您在其他grunt进程中更改了文件的名称,也可以进行配置.这只会将HTML标题更改为您所需的标题.

安装grunt-cache-breaker后,将其添加到GruntFile:

// Append a timestamp to 'app.js', 'controllers.min.js' which are both located in 'index.html'
// resulting in the index the call of : href="~/app.js?rel=1415124174159"...
        cachebreaker: {
            dev: {
                options: {
                    match: ['app.js', 'styles.css']
                },
                files: {
                    src: ['dist/index.html']
                }
            }
        },

然后你加载模块的地方:

grunt.loadNpmTasks('grunt-cache-breaker');

添加您想要的任务:

grunt.registerTask('deploy', [
        'clean:app',
        'copy:views',
        'copy:imgs',
        'copy:css',
        'uglify:app',
        'cssmin:app',
        'cachebreaker:dev'
    ]);

最后在控制台/命令提示符下运行grunt动作

> grunt deploy