Static asset revisioning through file content hash
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, install this plugin with this command:
$ npm install --save-dev grunt-filerev
This task will revision your files based on its contents. You should then set the files to expire far into the future for better caching and it will only update when it changes.
grunt.initConfig({
filerev: {
options: {
algorithm: 'md5',
length: 8
},
images: {
src: 'img/**/*.{jpg,jpeg,gif,png,webp}'
}
},
});
Type: string
Default: 'md5'
algorithm
is dependent on the available algorithms supported by the version of OpenSSL on the platform. Examples are 'sha1'
, 'md5'
, 'sha256'
, 'sha512'
, etc. On recent releases, openssl list-message-digest-algorithms
will display the available digest algorithms.
Type: number
Default: 8
The number of characters of the file hash to prefix the file name with.
Type: boolean
Default: false
Whether or not to use a query parameter (?rev=XXXXXXX
) instead of actually renaming the files. This way, the files will retain their filename, but a query parameter containing the file hash can be attached and used in later references. The link to the file, including the query parameter can be found in the grunt.filerev.summary
object and, e.g., be used in subsequent tasks like usemin.
It will overwrite the src
files if you don't specify a dest
:
filerev: {
images: {
src: ['img1.png', 'img2.png'],
dest: 'tmp'
}
}
The task keeps track of all files created and its sources in a summary that is
exposed through the grunt.filerev.summary
object. It can be used to replace
references to the revved files or debugging purposes. The key of the object is
the original filename, the value is the new revved path.
For a configuration like this
filerev: {
images: {
src: ['img1.png', 'img2.png'],
dest: 'tmp'
}
}
the content grunt.filerev.summary
could look like that:
{
'img1.png': 'tmp/img1.59bcc3ad.png',
'img2.png': 'tmp/img2.060b1aa6.png'
}
The task will ensure that any source map for .css
or .js
file is revisioned with the same revision as the source file.
For example, js/main.js
revisioned to js/main.9d713a59.js
will also have js/main.js.map
revisioned to the same hash js/main.9d713a59.js.map
.
BSD license and copyright Google