Grunt - How to update html files references within js files using grunt cache bust?

Question

In my js files I have references to HTML files, like window.location. I would like grunt cache bust to update that reference and add the hash data, so the loaded page is the

Answer 1

I've had a similar situation, and I solved by adapting the code above from RobC.

To avoid problems with cache when deploying, I added a hash after the html reference. By doing so, you force the browser to load the files after deployment, but after that, the files can be cached without problems.

Here's my code.

module.exports = function(grunt) {

    var randomstring = require("randomstring");

    grunt.initConfig({

        randomString: randomstring.generate(),

        replace: {
            js: {
                src: './src/**/*.js',
                dest: './dist/', //<-- creates a copy
                replacements: [{
                    from: '.js', // use string or regex to find the files you want
                    to: function (matchedWord) {
                        return matchedWord + '?<%= randomString %>';
                    }
                }]
            }
        }

    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask('default', ['replace:js']);

};

Answer 2

I can't find any configuration of the cache bust that allows me to write within the js file

...I also couldn't get it to do that.

Finally, I opted for a custom grunt solution to achieve this. This entailed:

1. Utilizing a node package called randomstring to generate my own random string.

$ npm install randomstring --save-dev

2. Setting the random string generated as the value of options.hash in my cacheBust task.
3. Utilizing grunt-text-replace to search the .js file/s for '.html' and replacing any instances found with the newly generated random string plus '.html'. E.g. '.a5G5p7QdOE6DF1St4k.html'.

$ npm install grunt-text-replace --save-dev

---

Gruntfile.js

module.exports = function(grunt) {

    var randomstring = require("randomstring");

    grunt.initConfig({

        randomString: randomstring.generate(),

        cacheBust: {
            myTarget: {
                options: {
                    // <-- Your options here 
                    hash: '<%= randomString %>' //<-- This template references the random generated string.
                },
                src: [/* Your settings here */]
            }
        },

        replace: {
            js: {
                src: './src/**/*.js',
                dest: './dist/', //<-- creates a copy
                replacements: [{
                    from: /\.html'/, // matches all instances of .html'
                    to: '.<%= randomString %>.html\'' //<-- Note the dot separator at the start.
                }]
            }
        }

    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask('myCacheBust', ['cacheBust:myTarget', 'replace:js']);
    grunt.registerTask('default', ['myCacheBust']);

};

Notes:

1. Any path references in the gist above will be need to be updated according to your project directory.
2. load-grunt-tasks is also used in the gist above:

$ npm install load-grunt-tasks --save-dev

3. The regex used in the replace:js task searches for all instances of the characters .html' in the .js files.
4. You can specify the no. of characters that appear in the random generated string by passing the value in as an argument. E.g. randomstring.generate(7)

Answer 3

I worked on a project which used Grunt cache bust to bust filenames in JS files. The configuration looked like this

cacheBust : {
    revProd: {
        options: {
            assets: ['**/*.js', '!assets/js/config.constant.js','**/*.css','!assets/css/themes/*.css'],
            baseDir: 'standardversion',
            deleteOriginals: true,
            jsonOutput: true, // Output the original => new URLs to a JSON file
            jsonOutputFilename: 'grunt-cache-bust.json'
        },
        src: ['standardversion/index.html', 'standardversion/assets/js/config.contants.js']
}

Where my config.contants.js file has paths like

'propertiesCtrl': 'assets/views/properties/controllers/properties.controller.js',
'propertyDetailsCtrl': 'assets/views/properties/controllers/propertyDetails.controller.js',
'propertyAddCtrl': 'assets/views/properties/controllers/addProperty.controller.js',

You can bust HTMLs by adding **/*.html to assets option