CODEWITHSUNDEEP
javascriptnode.jsgruntjs
adam
adam

Reputation: 3578

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?

Upvotes: 31

Views: 24813

Answers (6)

Andreas
Andreas

Reputation: 2153

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.

Upvotes: 2

Mahesh M
Mahesh M

Reputation: 1229

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

Upvotes: 0

Luis Gonzalez
Luis Gonzalez

Reputation: 131

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

Upvotes: 12

robertjd
robertjd

Reputation: 4903

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

Upvotes: 2

adam
adam

Reputation: 3578

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

Upvotes: 52

gillyspy
gillyspy

Reputation: 1598

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

Upvotes: -1

Related Questions