$ 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>- base
- revType
- dateFormat
- hashLength
- suffix
- fileTypes
- elementAttributes
- transformPath
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
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({
fileTypes:['img1'],
elementAttributes:{
img1:{
name:'img',
src:'data-src'
}
}))
.pipe(gulp.dest("./dist"))
})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">