gulp-rev-change-assets

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

Usage no npm install needed!

<script type="module">
  import gulpRevChangeAssets from 'https://cdn.skypack.dev/gulp-rev-change-assets';
</script>

README

插件说明

在插件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)}