Replaces <script>, <link>, and <img> HTML tags with their rev'd version for client and edge server caching.
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-userevvd --save-dev
The "userevvd" task
This is a companion task for grunt-filerev. You must run the
filerev task before running the
grunt-userevvd is a very lightweight and fast plugin that replaces the src/href attribute value for
<link> tags to their revv'd version.
The task reads the summary
grunt.filerev.summary object that
grunt-filerev creates. It replaces all the references to the newly revv'd files in the .html files you specify.
In your project's Gruntfile, add a section named
userevvd to the data object passed into
html task name replaces
link references in .html files. Currently only .html files are supported, but .css will come in the future.
You should use the files array format.
A function that formats the new
href value for the
link tag. The argument is passed a string containing the original path from the
A function that formats the original file path from grunt-filerev. This plugin will look for the a tag with the return value from this function to replace.
Assuming you have a directory struture like this:
| +- dist | +- assets | +- js | +- main.js | +- index.html
The contents of dist/index.html are:
With the following Grunt configuration:
grunt-filerev will add a hash to the main.js file name:
| +- dist | +- assets | +- js | +- main.k8dj3h45.js | +- index.html
And grunt-userevvd will change the reference to main.js in dist/index.html:
formatPath option were ommitted, dist/index.html would look like this:
Just like grunt-filerev, grunt-userevvd produces a
grunt.userevvd.summary object containing the original path and the new path for each file. Given the example above, the
grunt.userevvd.summary file would look like:
Or, if you omitted the
In other words, if you don't use the formatPath option,
grunt.userevvd.summary is exactly the same as
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.