gulp-rev-change-assets

v1.0.3

Published

3 years ago

Static asset revision data collector from manifests, generated from different streams, and replace their links in html template.

Downloads

0High
0Medium
0Low

hulingshare

gulpplugin gulp rev revision version versioning static asset assets collect collector domin assets

插件说明

在插件gulp-rev-collector基础上添加了功能，在通过mainfest文件替换资源文件路径之前，先转换为相对更目录的完整路径，还可以替换域名，实现cdn功能。

目前增加代码如下

// 先替换绝对路径，然后再按照mainfest文件替换
var ASSETS_RE = /([^'"# ()?]+\.(EXT))\b/ig;
var defExts = [
    'js', 'css', 'tpl',
    'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp',
    'ttf', 'eot', 'otf', 'woff'
];
var pattern = new RegExp(ASSETS_RE.source.replace('EXT', defExts.join('|')), 'ig');
src = src.replace(pattern, function ($, url) {
    var absolutePath = path.join(path.dirname(file.path), url)
    var relativePath = path.relative(file.base, absolutePath).replace(/\\/g, "/") // 路径转换为相对于根目录的完整路径
    opts.domin = opts.domin || '/'
    var dominPath = opts.domin + relativePath // 静态资源可以设置cdn
    return dominPath
})

gulp-rev生成的映射文件参考

生成的mainfest文件参考如下, /rev/css

{
  "other/css/app.css": "other/css/app-5a57e80733.css",
  "test/css/app.css": "test/css/app-7839690abc.css"
}

资源映射文件/rev/img

{
  "other/img/user_logo.png": "other/img/user_logo-433bf89f28.png",
  "test/img/user_logo.png": "test/img/user_logo-7acd1e5617.png"
}

资源映射文件/rev/js

{
  "other/js/app.js": "other/js/app-9f741d5f26.js",
  "test/js/app.js": "test/js/app-9f741d5f26.js"
}

使用方法

替换html,css,js中引入的资源，其中css,js中可能有图片

export function html(cb) {
    gulp.src(['rev/**/*.json', './**/*.html', './dist/**/*.css', './dist/**/*.js', '!./node_modules/**/*'])
    .pipe( revCollector({  //替换引入的资源路径
        replaceReved: true,
        dirReplacements: {}, // 替换规则与gulp-rev-collector一致
        domin: 'http://localhost:8020/', // 静态资源可以设置cdn地址
    }) )
    .pipe(minifyHTML()) //压缩html
    .pipe(gulp.dest('./dist'))
    cb()
}

替换之后生成效果

之前

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="lpchen">
	<meta name="description" content="邻药汇APP下载页">
	<meta name="format-detection" content="telephone=no"/>
	<title>邻药汇</title>
	<!--CSS-->
	<link rel="stylesheet" href="./css/app.css">
</head>
<body>
	<div class="app">
		头部
	</div>
	<div class="pic_area">
		<img src="./img/user_logo.png" alt="头像">
		<div class="btn">修改头部文字</div>
	</div>
	<div class="footer">
		尾部
	</div>
</body>
<script src="./js/app.js"></script>
</html>

html文件替换后

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=author content=lpchen><meta name=description content=邻药汇APP下载页><meta name=format-detection content="telephone=no"><title>邻药汇</title><link rel=stylesheet href=http://localhost:8020/other/css/app-5a57e80733.css></head><body><div class=app>头部</div><div class=pic_area><img src=http://localhost:8020/other/img/user_logo-433bf89f28.png alt=头像><div class=btn>修改头部文字</div></div><div class=footer>尾部</div></body><script src=http://localhost:8020/other/js/app-9f741d5f26.js></script></html>

其中如果css中使用了背景图片也可以替换

css替换图片前

.app {
  font-size: 16px;
  width: 200px;
  height: 30px;
  line-height: 30px;
  background: #f90;
  color: #fff;
  text-align: center;
  background: url('../img/user_logo.png')
}
//...

css替换图片后

.app{font-size:16px;width:200px;height:30px;line-height:30px;background:#f90;color:#fff;text-align:center;background:url(http://localhost:8020/other/img/user_logo-433bf89f28.png)}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

插件说明

目前增加代码如下

gulp-rev生成的映射文件参考

使用方法

替换之后生成效果