gulp-rev-easy
Advanced tools
easy add hash to asset path uc.js to uc.js?v=afb23 or simple add date uc.js to uc.js?v=201503031214
upgrade to [1.2.x] add new parse mode:plain, support unwell-formed html, if you want use old mode set revMode to 'dom', now default mode is plain mode
//options
{
revMode:'plain'
}
$ npm install gulp-rev-easy --save-dev
assets\index.css
assets\index.js
test.html
gulpfile.js
//test.html
<!doctype html>
<html lang="en">
<head>
<title>gulp-rev-easy</title>
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024">
</head>
<body>
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg">
<script src="assets/index.js?max_age=1024"></script>
</body>
</html>
//gulpfile.js
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy())
.pipe(gulp.dest("./dist"))
})
gulp reveasy
<!doctype html>
<html lang="en">
<head>
<title>gulp-rev-easy</title>
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024&v=0a1085be">
</head>
<body>
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
</body>
</html>
type:string
default:file.cwd
set base directory for your assets
<img src='/a/b.png'/> rev will found file in path.join(base, src)
options.cwd is obsoleted, use options.base or set gulp.src(path, {cwd:mycwd}) instead
revMode:['dom'|plain']
default:'plain'
set rev mode, set patterns
more and more unwell-formed documents, it's can't parse to dom-tree or sometime lost/change raw text, so add new parse mode:plain.
type:['hash'|date']
default:'hash'
set rev type
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({revType:'date'}))
.pipe(gulp.dest("./dist"))
})
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024">
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024&v=201503061144">
type:string
default:'yyyymmddHHMM'
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({revType:'date', dateFormat:'yymmddHHmm'}))
.pipe(gulp.dest("./dist"))
})
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024&v=1503061144">
type:integer
default:8
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({revType:'hash', hashLength:5}))
.pipe(gulp.dest("./dist"))
})
<!--default output-->
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
-->
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d1">
type:string
default:v
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({suffix:'hashkey'}))
.pipe(gulp.dest("./dist"))
})
<!--default output-->
<img src="assets/audrey-hepburn.jpg?v=7c5d110d">
-->
<img src="assets/audrey-hepburn.jpg?hashkey=7c5d110d">
type:array
default:['js','css','img']
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({fileTypes:['js']}))
.pipe(gulp.dest("./dist"))
})
<!doctype html>
<html lang="en">
<head>
<title>gulp-rev-easy</title>
<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024">
</head>
<body>
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
</body>
</html>
/*
how find target element
js: {
name: 'script',
src: 'src'
}
=>
$('script').attr('src') = newpath
use other selector in name such as
{
name:'.cached',
src:'src'
}
*/
type:object
default:{
js: {
name: 'script',
src: 'src'
},
css: {
name: 'link[type="text/css"]',
src: 'href'
},
img:{
name: 'img',
src : 'src'
}
}
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({
fileTypes:['img1'],
elementAttributes:{
img1:{
name:'img',
src:'data-src'
}
}))
.pipe(gulp.dest("./dist"))
})
<!--default out-->
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
-->
<img data-src="assets/audrey-hepburn.jpg?v=7c5d110d"
src="assets/audrey-hepburn.jpg">
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({
revMode:'dom',
fileTypes:['img1'],
elementAttributes:{
img1:{
name:'img',
src:'data-src'
}
}))
.pipe(gulp.dest("./dist"))
})
type : object
default:
patterns:{
js:{
regex:/(<script[^>]*?\s+src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
},
css:{
regex:/(<link[^>]*?\s+rel=['"]stylesheet['"]?[^>]*?\s+href=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
},
img:{
regex:/(<img[^>]*?\s+src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
}
}
return $1 + ['|"] + options.transformPath($2) + $3
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({
revMode:'plain',
fileTypes:['img1', 'img'],
patterns:{
img1:{
regex:/(<img[^>]*?\s+data-src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
}
}}))
.pipe(gulp.dest("./dist"))
})
<!--default out-->
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
-->
<img data-src="assets/audrey-hepburn.jpg?v=7c5d110d"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
type:RegExp
default:/<script\b[^<]*(?:(?!<\/script>)<[^<]*)+<\/script>/gi
ignore rev content,
default will ignore any content in <script type=text\/javascript>..</script>
if you want rev script set to false
gulp.task("reveasy-plain-mode", function (argument) {
gulp.src("test.html")
.pipe(reveasy({
revMode:'plain',
fileTypes:['img1', 'img', 'css', 'js'],
ignorePattern:false,
patterns:{
img1:{
regex:/(<img[^>]*?\s+data-src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
}
}}))
.pipe(gulp.dest("./dist"))
})
<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">
<script src="assets/index.js?max_age=1024"></script>
<script type=text/javascript>
var test2 = '<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">'
</script>
<script type="text/html">
<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">
</script>
<!--default ignore <script type="text/script">..</script> tag -->
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
<script type=text/javascript>
var test2 = '<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">'
</script>
<script type="text/html">
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
</script>
set to ignorePattern:false
<!-- set to false, rev all -->
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
<script type=text/javascript>
var test2 = '<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">'
</script>
<script type="text/html">
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
</script>
type:function
default:function(orgPath, ver){}
custom change path
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");
gulp.task("reveasy", function (argument) {
gulp.src("test.html")
.pipe(reveasy({
transformPath:function(orgpath, ver){
var newpath = "http://s1.cdn.com/" + orgpath
+ (orgpath.indexOf('?') > -1 ? "&" : "?")
+ "v=" + ver;
return newpath;
}
}))
.pipe(gulp.dest("./dist"))
})
<!--default out-->
<img data-src="assets/audrey-hepburn.jpg"
src="assets/audrey-hepburn.jpg?v=7c5d110d">
-->
<img data-src="assets/audrey-hepburn.jpg"
src="http://s1.cdn.com/assets/audrey-hepburn.jpg?v=7c5d110d">
type:function
default:
findFile:
function(src, filepath, options){
var assertpath = src;
var srcpath = url.parse(src).pathname;
if ((/^\/{1}[^\/]+/gi).test(srcpath)) {
assertpath = path.join(options.base, srcpath);
} else {
assertpath = path.join(path.dirname(filepath), srcpath);
}
return assertpath;
}
set custom findFile funciton
FAQs
easy add hash to asset path uc.js to uc.js?v=afb23 or simple add date uc.js to uc.js?v=201503031214
We found that gulp-rev-easy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.