Cache busting files and updating references
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-cache-busting --save-dev
'cache-busting':requirejs:replace: 'tmp/**/*.html'replacement: 'MainApp'file: 'tmp/deploy/js/app/MainApp.min.js'css:replace: 'tmp/**/*.html'replacement: 'style.css'file: 'tmp/deploy/css/style.css'cleanup: true //Remove previously generated hashed files.
Say that the index.html looks like this:
grunt cache-busting, this file will look like this, and the files have changed accordingly on disk:
Optionally, you can pass the
get_param option to simply append a query string parameter to the path of the file. This is useful if you need to change the contents of a file, but not the filename.
Note: Some proxy servers do not re-request assets when a new query string is used. If a significant portion of your users use proxy servers, you may want to change the filename instead of appending a query string.
'cache-busting':css:replace: 'tmp/**/*.html'replacement: 'style.css'file: 'tmp/deploy/css/style.css'get_param: true
Will change the html above to this:
replace is an array of source files that is searched for the strings to be replaced. It supports minimatch paths.
replacement is a string for which we search and replace by the hash. If it contains an extension, the extension will be preserved.
file is the file which will be renamed to filename-HASH-OF-FILE-CONTENTS.ext. The hash is generated based on the file contents of this parameter.