Dynamically add version number to dest output files w/ grunt

Question

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?

Answer 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'),

Answer 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

Answer 3

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

Answer 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.