在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):timtian/gulp-rev-easy开源软件地址(OpenSource Url):https://github.com/timtian/gulp-rev-easy开源编程语言(OpenSource Language):JavaScript 87.5%开源软件介绍(OpenSource Introduction):gulp-rev-easyupgrade 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
Install
Examples
Input//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> Useage//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"))
})
Output<!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> Options
options.base
options.revMode
options.revType
examplevar 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"> options.dateFormat
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"))
}) Output<link type="text/css" rel="stylesheet" media="all"
href="assets/index.css?max_age=1024&v=1503061144"> options.hashLength
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"))
}) Output<!--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"> options.suffix
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"))
}) Output<!--default output-->
<img src="assets/audrey-hepburn.jpg?v=7c5d110d"> --> <img src="assets/audrey-hepburn.jpg?hashkey=7c5d110d"> options.fileTypes
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"))
}) Output<!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> options.elementAttributes (dom mode) /*
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"))
}) Output <!--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"))
}) options.patterns (plain mode)
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"))
}) Output <!--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"> options.ignorePattern (plain mode)
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"))
}) In<img data-src="assets/audrey-hepburn.jpg" |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论