|
| 1 | +# grunt-cache-killer |
| 2 | + |
| 3 | +Ever wanted to ensure that your most recently deployed asset files (eg: css, js, img, etc) are being used instead of the old long-term cached versions? |
| 4 | + |
| 5 | +Then look no further...! |
| 6 | + |
| 7 | +This grunt plugin inserts a **cache avoiding** string into your asset filename, then looks for and updates any reference to it within your template file(s). |
| 8 | + |
| 9 | +Find this npm plugin at [https://www.npmjs.com/package/grunt-cache-killer](https://www.npmjs.com/package/grunt-cache-killer). |
| 10 | + |
| 11 | +## Getting Started |
| 12 | + |
| 13 | +This plugin requires Grunt `~1.0.3` |
| 14 | + |
| 15 | +If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as how to install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command: |
| 16 | + |
| 17 | +```shell |
| 18 | +npm install --save-dev grunt-cache-killer |
| 19 | +``` |
| 20 | + |
| 21 | +Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: |
| 22 | + |
| 23 | +```js |
| 24 | +grunt.loadNpmTasks('grunt-cache-killer'); |
| 25 | +``` |
| 26 | + |
| 27 | +Alternatively, install the 'load-grunt-tasks' plug (`npm install --save-dev load-grunt-tasks`) and add the following line of code to your gruntfile.js `require('load-grunt-tasks')(grunt);` to automatically load your plugin(s). |
| 28 | + |
| 29 | +## The "cacheKiller" task |
| 30 | + |
| 31 | +### Overview |
| 32 | + |
| 33 | +In your project's Gruntfile, add a section named `cacheKiller` to the data object passed into `grunt.initConfig()`. |
| 34 | + |
| 35 | +```js |
| 36 | +grunt.initConfig({ |
| 37 | + cacheKiller: { |
| 38 | + taskName: { |
| 39 | + // Options |
| 40 | + }, |
| 41 | + files: { |
| 42 | + // Asset filename : // Template filename(s) |
| 43 | + }, |
| 44 | + }, |
| 45 | +}); |
| 46 | +``` |
| 47 | + |
| 48 | +### Options |
| 49 | + |
| 50 | +- `prepend` (string) - A string value that is used to add characters to the front of the `[mask]`. The default value is an empty string. |
| 51 | + |
| 52 | +- `append` (string) - A string value that is used to add characters to the back of the `[mask]`. The default value is an empty string. |
| 53 | + |
| 54 | +- `mask` (string) - A string value that is used to specify the passed in mask. The default value is `{md5}`. |
| 55 | + - If a **cacherKiller** mask function is used, then the string generated from that internal function is inserted. CacheKiller's mask functions include: |
| 56 | + - `{timestamp}` eg: `1551278199614` |
| 57 | + - `{datetimestamp}` eg: `20190228123639` |
| 58 | + - `{md5}` eg: `70a1d7fe6502fa887f5b810d9063da07` |
| 59 | + - If a **string** is used, then that string is inserted. eg: `mask: 'my-string'` |
| 60 | + |
| 61 | +- `length` (number) - A number value that is used to set the length of the mask. The default value is `-1`. |
| 62 | + - If the value of the number is negative (eg: `-1`) then the length of the given / generated string remains unchanged. |
| 63 | + - If the value of the number if positive (eg: `8`) then only that value of right-hand characters in the string will remain. |
| 64 | + - If the value of the number is zero (eg: `0`) then the mask string (excluding the prepend and append strings) is not used. |
| 65 | + |
| 66 | +### Usage |
| 67 | + |
| 68 | +Within the cacheKiller's `files:` node, place the `[mask]` within the asset filename where you would like the mask to be added. |
| 69 | + |
| 70 | +> **Warning** - Do not place the `[mask]` at the very beginning or very end of the asset filename. Doing so prevents cacheKiller from properly determining where the start or end of the asset filename exists within the template file(s). |
| 71 | +
|
| 72 | +### Usage Examples |
| 73 | + |
| 74 | +#### Default Options |
| 75 | + |
| 76 | +In this example, the default options are used. |
| 77 | + |
| 78 | +```js |
| 79 | +grunt.initConfig({ |
| 80 | + cacheKiller: { |
| 81 | + taskName: { |
| 82 | + options: { |
| 83 | + prepend: '', |
| 84 | + append: '', |
| 85 | + mask: '{md5}', |
| 86 | + length: -1 |
| 87 | + }, |
| 88 | + files: { |
| 89 | + 'public/css/app[mask].min.css': 'app/views/templates/master.html', |
| 90 | + }, |
| 91 | + }, |
| 92 | + }, |
| 93 | +}); |
| 94 | +``` |
| 95 | + |
| 96 | +Before running cacheKiller. |
| 97 | + |
| 98 | +``` |
| 99 | +// Asset file. |
| 100 | +
|
| 101 | +public/css/app.min.css |
| 102 | +``` |
| 103 | + |
| 104 | +```html |
| 105 | +<!-- master.html --> |
| 106 | + |
| 107 | +<link href="https://www.site.com/css/app.min.css" rel="stylesheet"> |
| 108 | +``` |
| 109 | + |
| 110 | +After running cacheKiller. |
| 111 | + |
| 112 | +``` |
| 113 | +// Asset file. |
| 114 | +
|
| 115 | +public/css/app70a1d7fe6502fa887f5b810d9063da07.min.css |
| 116 | +``` |
| 117 | + |
| 118 | +```html |
| 119 | +<!-- master.html --> |
| 120 | + |
| 121 | +<link href="https://www.site.com/css/app70a1d7fe6502fa887f5b810d9063da07.min.css" rel="stylesheet"> |
| 122 | +``` |
| 123 | + |
| 124 | +#### Custom Options |
| 125 | + |
| 126 | +In this example, custom options are used |
| 127 | + |
| 128 | +```js |
| 129 | +grunt.initConfig({ |
| 130 | + cacheKiller: { |
| 131 | + taskName: { |
| 132 | + options: { |
| 133 | + prepend: '-', |
| 134 | + append: '.dev', |
| 135 | + mask: '{md5}', |
| 136 | + length: 8 |
| 137 | + }, |
| 138 | + files: { |
| 139 | + 'public/css/app[mask].min.css': 'app/views/templates/master.html', |
| 140 | + 'public/js/app[mask].min.js': 'app/views/templates/master.html' |
| 141 | + }, |
| 142 | + }, |
| 143 | + }, |
| 144 | +}); |
| 145 | +``` |
| 146 | + |
| 147 | +Before running cacheKiller. |
| 148 | + |
| 149 | +``` |
| 150 | +// Asset files. |
| 151 | +
|
| 152 | +public/css/app.min.css |
| 153 | +public/js/app.min.js |
| 154 | +``` |
| 155 | + |
| 156 | +```html |
| 157 | +<!-- master.html --> |
| 158 | + |
| 159 | +<link href="https://www.site.com/css/app.min.css" rel="stylesheet"> |
| 160 | +<script src="https://www.site.com/js/app.min.js"></script> |
| 161 | +``` |
| 162 | + |
| 163 | +After running cacheKiller. |
| 164 | + |
| 165 | +``` |
| 166 | +// Asset files. |
| 167 | +
|
| 168 | +public/css/app-9063da07.dev.min.css |
| 169 | +public/js/app-f959224b.dev.min.js |
| 170 | +``` |
| 171 | + |
| 172 | +```html |
| 173 | +<!-- master.html --> |
| 174 | + |
| 175 | +<link href="https://www.site.com/css/app-9063da07.dev.min.css" rel="stylesheet"> |
| 176 | +<script src="https://www.site.com/js/app-f959224b.dev.min.js"></script> |
| 177 | +``` |
| 178 | + |
| 179 | +## Contributing |
| 180 | + |
| 181 | +In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/). |
| 182 | + |
| 183 | +## Release History |
| 184 | + |
| 185 | +| Date | Version | Comments | |
| 186 | +| :--------: | :-----: | :---------------| |
| 187 | +| 01-03-2019 | 1.0.0 | Initial commit. | |
0 commit comments