Dynamically add version number to dest output files w/ grunt

问题

I have a package.json file with our version number, such as:

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

My goal is to dynamically add the version number from the package.json file into the output files. For example, in the javascript I don't want to manually update the version number, but would like something similar to this to be generated after each grunt build:

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

Is there an easy way to do this in my Gruntfile.js configuration?

回答1:

I implemented: https://github.com/erickrdch/grunt-string-replace

In my source css/js files, I use the text {{ VERSION }} which gets replaced with the version number set in the package.json file. Below is the config I added to 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'),

回答2:

I think that what you only want to do is to put some kind of trick for unable the page to use the cache files that maybe the browser have, and by now, the only way for that cross-browser is putting something on the href urls like "app.v2_2.js" or "app.js?ver=22". So I use this grunt npm package:

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

By default it only adds a parameter to your javascript and in almost the cases is the thing you need for not using cache, but you can configure even if you change the name of the file in other grunt process. This only change the HTML headers to what you desire.

After you install the grunt-cache-breaker, add this to your 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']
                }
            }
        },

Then where you load the modules:

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

Add on the task you want to:

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

And finally run the grunt action on the console/command prompt

> grunt deploy

回答3:

I would suggest using the banner feature in grunt-contrib-concat

回答4:

this can be done as well with the banner option of https://github.com/gruntjs/grunt-contrib-uglify - which takes also care of the minifiaction of the javascript files.

回答5:

filerev provides this option now. Use process to manipulate the filename that will be otherwise suffixed with md5 hash of the file content. You can use this to insert your version to every file you want.

Ref: https://github.com/yeoman/grunt-filerev

回答6:

create something like package.json in the root of your project

it should read that or you can do something like

pkg: grunt.file.readJSON('package.json'),

in that you'll have a version declaration which would obviously correspond to <%= pkg.version %> so have that string in your json output and then run grunt.config.process to do the variable replacement

do something similar for the comment header

来源：https://stackoverflow.com/questions/20437620/dynamically-add-version-number-to-dest-output-files-w-grunt

标签

javascript

node.js

gruntjs