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