grunt-hashify-urls
v0.1.1
Published
Grunt task for appending cache-busting MD5 hashes to CSS url()’s
Downloads
10
Readme
grunt-hashify-urls
This Grunt task searches CSS files for url(…)
s, gets the MD5 hash of the referenced resource (background images, web fonts etc), and then appends a query string to the url to bust CDN caches. For example, .class { background: url(/images/blank.gif); }
becomes .class { background: url(/images/blank.gif?v=b44917055649); }
.
It does not do anything for:
- absolute urls, e.g.
url(http://…)
orurl(https://…)
- data uris, e.g.
url(data:image/png;base64,iVBORw0…)
- invalid urls, e.g. when the resource cannot be correctly resolved in the FS
Getting Started
This plugin requires Grunt ~0.4.5
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-hashify-urls --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-hashify-urls');
The "hashifyUrls" task
Overview
In your project's Gruntfile, add a section named hashifyUrls
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
hashifyUrls: {
options: {
baseDir: 'public'
},
files: {
src: ['public/css/common.css', 'public/css/page.css']
}
}
});
Options
options.hashLength
Type: Number
Default: 12
The length of the MD5 hash to truncate to.
options.baseDir
type: String
Default: process.cwd()
The dir to look for resources referenced in CSS url(…)
s. For example, if your CSS serves url(/images/logo.png)
and the FS path to the image is public/images/logo.png
, set this to public
.
Contributing
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.