gulp-revplace
Simple helper for gulp-rev to fix all asset references. It works with relative urls too! By default it doesn't pass through assets that are not mentioned in source files. This plugin can be very useful in your build scenarios.
Install
$ npm install --save-dev gulp-revplace
Usage
Structure before rev:
.├── build└── static ├── images │ ├── cat.png │ ├── ghost.png │ ├── pumpkin.png │ └── zombie.png ├── index.html ├── scripts │ └── script.js └── styles └── style.css
script.js
and style.css
have references to all images. index.html
have references to script.js
and style.css
.
/* style.css */
// script.js { var absoluteImageUrl = ; var relativeImageUrl = ; var absoluteImageUrl2 = ;};
<!-- index.html -->
Let's make simple gulp task:
var gulp = ;var rev = ;var revplace = ;var es = ;var baseDir = 'static'; gulp;
After execution file names will be changed and all references will be replaced.
.├── build│ ├── images│ │ ├── cat-1ccfa741.png│ │ ├── ghost-aa908d61.png│ │ ├── pumpkin-5ca50d04.png│ │ └── zombie-68157885.png│ ├── index.html│ ├── scripts│ │ └── script-921c4eaf.js│ └── styles│ └── style-cc726e1b.css└── static ├── images │ ├── cat.png │ ├── ghost.png │ ├── pumpkin.png │ └── zombie.png ├── index.html ├── scripts │ └── script.js └── styles └── style.css
/* style.css */
// script.js { var absoluteImageUrl = ; var relativeImageUrl = ; var absoluteImageUrl2 = ;};
<!-- index.html --> Test page
You can even change dirname
s of your files. It will also work like a charm.
gulp;
Structure will be changed...
.
├── cat-5d0e5c9b.png
├── ghost-61865acd.png
├── index.html
├── pumpkin-cb05ce1b.png
├── script-6bc83506.js
├── style-21373b83.css
└── zombie-0dc22dba.png
...as well as file references.
/* style.css */
// script.js { var absoluteImageUrl = ; var relativeImageUrl = ; var absoluteImageUrl2 = ;};
<!-- index.html --> Test page
API
revplace(options)
regex
Type: RegExp
Usage: Sets a custom regex to match on your files.
Default: /(?:url\(["']?(.*?)['"]?\)|src=["'](.*?)['"]|src=([^\s\>]+)(?:\>|\s)|href=["'](.*?)['"]|href=([^\s\>]+)(?:\>|\s)|ASSET\(['"](.+)['"]\))/g
You can define and use simple ASSET() function that only returns what it was given. Use it to declare asset urls in scripts. It'll help plugin to find all assets.
{return s;}
addPrefix
Type: String
Usage: Add prefix to replaced urls
Default: /
stripPrefix
Type: String
Usage: Strip prefix from initial urls
skipUnmentioned
Type: Boolean
Usage: If TRUE only assets that are mentioned in source files will be passed through stream. Source files are always passed.
Default: true
verbose
Type: Boolean
Usage: Activate verbose mode