Replaces <script>, <link>, and <img> HTML tags with their rev'd version for client and edge server caching.
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-userevvd --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-userevvd');This is a companion task for grunt-filerev. You must run the filerev task before running the userevvd task.
grunt-userevvd is a very lightweight and fast plugin that replaces the src/href attribute value for <script> or <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 grunt.initConfig().
An html task name replaces script and 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.
grunt.initConfig({
userevvd: {
html: {
files: [
{
cwd: 'dist/',
src: '**/*.html',
expand: true,
dest: 'dist'
}
]
},
},
});####options.formatNewPath (optional)
A function that formats the new src or href value for the script/link tag. The argument is passed a string containing the original path from the grunt.filerev.summary object.
####options.formatOriginalPath (optional)
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:
<!doctype html>
<html>
<head>
<script src="dist/assets/js/main.js"></script>
</head>
</html>With the following Grunt configuration:
grunt.initConfig({
filerev: {
dist: {
src: 'dist/assets/js/**/*.js'
}
}
userevvd: {
html: {
options: {
formatPath: function(path){
return path.replace(/^dist/, 'https://cdn.domain.com');
}
},
files: [
{
cwd: 'dist/',
expand: true,
src: '**/*.html',
dest: 'dist'
}
]
}
},
});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:
<!doctype html>
<html>
<head>
<script src="https://cdn.domain.com/assets/js/main.k8dj3h45.js"></script>
</head>
</html>If the formatPath option were ommitted, dist/index.html would look like this:
<!doctype html>
<html>
<head>
<script src="dist/assets/js/main.k8dj3h45.js"></script>
</head>
</html>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:
{
"dist/assets/js/main.js": "https://cdn.domain.com/assets/js/main.k8dj3h45.js"
}Or, if you omitted the formatPath option:
{
"dist/assets/js/main.js": "dist/assets/js/main.k8dj3h45.js"
}In other words, if you don't use the formatPath option, grunt.userevvd.summary is exactly the same as grunt.filerev.summary.
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.
(Nothing yet)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent