grunt-filerev-match-replace v0.0.10
grunt-filerev-match-replace
Replace assert references reversioned by filerev
Getting Started
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 grunt-filerev-match-replace
Overview
This task will replace asserts references in css, html, pug files. You can write your own match analyzer to process assert references in any kind of template file.
Example
var analyzers = [
'css-background-analyzer',
'html-image-analyzer',
'html-link-analyzer',
'html-script-analyzer'
];
analyzers.push(require('path/to/your/own/analyzer'));
grunt.initConfig({
filerev: {
options: {
algorithm: 'md5',
length: 8
},
asserts: {
src: 'dest/**/*.{js,css,png,jpg,svg,gif,jpeg}'
}
},
filerev_match_replace: {
dist: {
src: 'dest/**/*.{css,js,html}',
options: {
analyzers: analyzers,
webroot: "dest/" //which dir is considers as root '/'
}
}
}
});
Options
analyzers
Type: Array
Default: undefined
analyzers
is a list of analyzers used to analyze source code.
You can use analyzers defined by this plugin by simply add the name to the array(as example code shows).
Analyzers defined by this plugin include:
css-background-analyzer
, replace assert references in background defined in css files.html-image-analyzer
, replace assert references in img tags defined in html files.html-link-analyzer
, replace assert references in link tags defined in html files.html-script-analyzer
, replace assert references in script tags defined in html files.pug-link-analyzer
, replace assert references in link tags defined in pug files.pug-script-analyzer
, replace assert references in script tags defined in pug files.pug-image-analyzer
, replace assert references in img tags defined in pug files.
You can add you own analyzer by adding the module object to analyzers
array.
webroot
Type: string
Default:
The dir which considered as root in assert url.
How to write your own analyzer?
An analyzer is a module which exports two functions: accept
and analyze
.
module.exports = {
except: function(filetype) {
return filetype === 'html';
},
analyze: function(content) {
}
};
function
accept
takes one parameterfiletype
which indicates current file's filename extension(like: html, js, css). You can determine what kind of file this analyzer wish to process. As the example code above shows, the analyzer only process html files.function
analyze
takes one parametercontent
which is the string content of the source file. You can search code for replace inanalyze
function using regular expression or whatever.analyze
must return a plain object like this:
{
"background: url(/asserts/images/bg.png)": {
"origin_url": "/asserts/images/bg.png",
"count": 2
}
}
The return value above tells replace task that, background: url(/asserts/images/bg.png)
in source file need to be replaced, origin_url
is the url of an assert, count
means background: url(/asserts/images/bg.png)
appears twice in the source code(need to be replaced twice).