How to add a build timestamp at the end of the minified files

Question

I have a real issue now, When I'm on Production and when ever I update my CSS or JS the same file keeps on serving from the server.. I i need to get the new updates then I have to hard refresh the browser,

I'm thinking of having a way to add a build version at the end of my minified file name, So when ever my files are updated and Grunt minifies my files it will output a perfect link which will be newly downloaded by the web browser

Right now the link is like this

<script src="/min/production.min.js"></script>

I need this to be,

(<script src="/min/production[timestamp].min.js"></script>)

score 3 · Accepted Answer · answered Apr 19 '15 at 08:37

What I've done to do this are as following

tasks/uglify.js

Replace following line

dest:'.tmp/public/min/production.min.js'

with

dest: global.productionJSName

tasks/sails-linker.js

Add following variables to your task

global.timestamp = global.timestamp || new Date().getTime();
global.productionJSName = '.tmp/public/min/production-' + global.timestamp + '.min.js';

module.exports = function(grunt) {
    var productionJSName = global.productionJSName // Add this
    ...

Replace all the old path to productionJSName

...
prodJs : {
    ...
    files: {
            '.tmp/public/**/*.html': [productionJSName],
            'views/**/*.html': [productionJSName],
            'views/**/*.ejs': [productionJSName]
        }
}
...
prodJsRelative : {
    ...
    files: {
            '.tmp/public/**/*.html': [productionJSName],
            'views/**/*.html': [productionJSName],
            'views/**/*.ejs': [productionJSName]
        }
}
...
prodJsJade : {
    ...
    files: {
            'views/**/*.jade': [productionJSName]
        }
}
...
prodJsRelativeJade : {
    ...
    files: {
            'views/**/*.jade': [productionJSName]
        }
}

I'm not sure this is the best way, let me know if you find a better solution.

Bro, Works great so far, Could you tell me how you learn this ? Did you learn Grunt from the start ? Please advise me on this. Cheers mate — Sahan, Apr 19 '15 at 10:57
Hi, I didn't learn grunt from the start, I learned this by tracing the Sails.js' code. Which means I learn what I need to use. — Ryan Wu, Apr 20 '15 at 08:50

score 1 · Answer 2 · answered Apr 20 '15 at 12:37

I think i have found the easiest solutions to solve issue with refresing static. For example in tasks/sails-linker.js:

prodJs: {
        options: {
            startTag: '<!--SCRIPTS-->',
            endTag: '<!--SCRIPTS END-->',
            fileTmpl: '<script src="%s?v=<%- (new Date()).getTime() %>"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': ['.tmp/public/min/production.min.js'],
            'views/**/*.html': ['.tmp/public/min/production.min.js'],
            'views/**/*.ejs': ['.tmp/public/min/production.min.js']
        }
    },

So, you need just add a template injection with timestamp (<%- (new Date()).getTime() %>).

How to add a build timestamp at the end of the minified files

2 Answers2