gcb

grunt-cache-busting

Cache busting files and updating references

Showing:

Popularity

Downloads/wk

294

GitHub Stars

8

Maintenance

Last Commit

6yrs ago

Contributors

5

Package

Dependencies

2

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

grunt-cache-busting

Cache busting files and updating references

Getting Started

This plugin requires Grunt ~0.4.0

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

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-cache-busting');

Usage

'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:

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />

    <script data-main="js/app/MainApp" src="js/vendors/requirejs/require.js"></script>
</head>
<body>

</body>
</html>

After running grunt cache-busting, this file will look like this, and the files have changed accordingly on disk:

<html>
<head>
    <link rel="stylesheet" href="css/style-HASH-OF-FILE-CONTENTS.css" />

    <script data-main="js/app/MainApp-HASH-OF-FILE-CONTENTS" src="js/vendors/requirejs/require.js"></script>
</head>
<body>

</body>
</html>

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:

<html>
<head>
    <link rel="stylesheet" href="css/style.css?v=HASH-OF-FILE-CONTENTS" />

    <script data-main="js/app/MainApp-HASH-OF-FILE-CONTENTS" src="js/vendors/requirejs/require.js"></script>
</head>
<body>

</body>
</html>

API reference

replace

replace is an array of source files that is searched for the strings to be replaced. It supports minimatch paths.

replacement

replacement is a string for which we search and replace by the hash. If it contains an extension, the extension will be preserved.

file

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.

Credits

This plugin is build on top of grunt-text-replace and was inspired by grunt-cache-bust

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100