gulp-filerev-replace
v1.0.0
Published
Rev and replace files according to their mutual dependencies
Downloads
5
Keywords
Readme
gulp-filerev-replace
Rev and replace files according to their mutual dependencies. This plugin accepts a stream containing all the files to filerev and/or replace. It will detect which files reference which files, and then transform the files accordingly. For example, if we filerev and replace these files:
index.html: <img src="/loader.gif" /> <link href="/styles.css" type="text/css" />
loader.gif
styles.css: body {background: url("/loader.gif")}
The process will be the following (hashes are made up for the example):
- Filerev
loader.gif
intoloader-11111111.gif
- Replace
/loader.gif
inindex.html
andstyles.css
- Filerev
styles.css
intostyles-22222222.css
- Replace
/styles.css
inindex.html
- Filerev
index.html
intoindex-33333333.html
Notice that loader.gif
is filereved first, since it is referenced the most, then styles.css
and finally index.html
. The resulting stream will be:
loader-11111111.gif
styles-22222222.css: body {background: url("/loader-11111111.gif")}
index-33333333.html: <img src="/loader-11111111.gif" /> <link href="/styles-22222222.css" type="text/css" />
Usage
var filerevReplace = require('gulp-filerev-replace');
// Include all files to filerev and/or replace, making sure the base is correct
gulp.src('/mysite/**/*', {base: '/mysite'})
.pipe(filerevReplace({
filerev: ['assets/**/*'], // Select the files to filerev
replace: ['views/**/*'], // Select the files to replace
base: 'assets' // Filerevved files are served from the assets directory by the web server
}))
...
Options
filerev
: minimatch pattern to filter the files to filerev.replace
: minimatch pattern to filter the files to replace.base
: Directory from where the files are served by the web server. Optional, defaults to the file's base;
Manifest
A second plugin is also available that adds a new file to the stream. This file contains a JSON list of all files that were filereved.
Usage
var filerevReplace = require('gulp-filerev-replace');
// Include all files to filerev and/or replace, making sure the base is correct
gulp.src('/mysite/**/*', {base: '/mysite'})
.pipe(filerevReplace({
filerev: ['assets/**/*'], // Select the files to filerev
replace: ['views/**/*'], // Select the files to replace
base: 'assets' // Filerevved files are served from the assets directory by the web server
}))
.pipe(filerevReplace.addManifest({path: 'assets/filerev.json'}))
...
The example above would add a new file in the stream, with path assets/filerev.json
, containing something like:
{
"assets/loader.gif": "assets/loader-11111111.gif",
"assets/styles.css": "assets/styles-22222222.css"
}
Options
options
is an object containing the vinyl file options to use for the manifest file. It defaults to:
path
:filerev-replace-manifest.json
TODO
- Try to break this into simpler plugins...
- Handle null files
- Handle relative paths in current directory?
- Document matched patterns