摘要：原理修改和文件通过对文件内容进行运算，生成一个文件的唯一字符串如果文件修改则号会发生变化替换中的文件名，生成一个带版本号的文件名方案现在网上的方案都是生成一个新的目录，里面包含了要发布的等文件。
原理
修改js和css文件
通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
替换html中的js,css文件名，生成一个带版本号的文件名
方案现在网上的方案都是生成一个新的dist目录，里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中，会有情况不能生成新的HTML进行发布，需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案。
原html文件代码
预期效果：在原目录结构下html文件代码
1：安装gulp和gulp插件
执行：
npm install --save-dev gulp npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector npm install --save-dev run-sequence
2：编写gulpfile.js
//引入gulp和gulp插件
var gulp = require("gulp"),
runSequence = require("run-sequence"),
rev = require("gulp-rev"),
revCollector = require("gulp-rev-collector");
//定义css、js源文件路径
var cssSrc = "css/*.css",
jsSrc = "js/*.js";
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task("revCss", function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest("rev/css"));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task("revJs", function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest("rev/js"));
});
//Html替换css、js文件版本
gulp.task("revHtml", function () {
return gulp.src(["rev/**/*.json", "View/*.html"])
.pipe(revCollector())
.pipe(gulp.dest("View"));
});
//开发构建
gulp.task("dev", function (done) {
condition = false;
runSequence(
["revCss"],
["revJs"],
["revHtml"],
done);
});
gulp.task("default", ["dev"]);
执行gulp命令后的效果
//rev目录下生成了manifest.json对应文件
{
"default.css": "default-803a7fe4ae.css"
}
很显然这不是我们需要的效果
3.更改gulp-rev和gulp-rev-collector
打开node_modulesgulp-revindex.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + "?v=" + file.revHash;
打开nodemodulesgulp-rev odemodules ev-pathindex.js 10行 return filename + "-" + hash + ext; 更新为: return filename + ext;
打开node_modulesgulp-rev-collectorindex.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), "" ) !== path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split("?")[0] !== path.basename(key) ) {
再执行gulp命令，得到的结果如下(效果正确):
但是假如我们更改了css和js后，再执行gulp命令，得到的结果会如下:
有没有发现，会在版本号后面再添加一个版本号，因为gulp只替换了原来文件名，这样又不符合预期效果了，所以我们想到，还需要修改插件的替换正则表达式。
4.继续更改gulp-rev-collector
打开node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( "([/""])" + pattern, "g" ),
更新为: regexp: new RegExp( "([/""])" + pattern+"(?v=w{10})?", "g" ),
现在你不管执行多少遍gulp命令，得到的html效果都是
附上改过后的node_modules文件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90906.html
摘要：虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要数据显示只有的最终用户响应时间花在了下载文档上。前端性能优化一味奉行最佳实践有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。 前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载...
摘要：前端静态资源缓存最优解以及的陷阱合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。此处注意和与第一天请求的版本号不同。既支持版本号类型的静态资源缓存方式也支持服务器重新认证的方式。 前端静态资源缓存最优解以及max-age的陷阱 合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有，如果是这样...
摘要：结果会被存放到拷贝文件目录你可以使用方法拷贝文件目录到新路径，所有操作都相对于项目根目录版本号缓存刷新很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。 环境准备 1、安装 nodejs 和 npm 如果你使用的是 Laravel 的 Homestead 环境，可以不用安装了，已自带。 我们来查看下它们的版本： $ node -v ...
摘要：关于标题，为什么是爱与恨因为在刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，设计不合理。用户只有首次访问需要下载全部静态资源，以后的访问都直接使用缓存资源。首先，在中添加字段，当为时，则开启服务。例如请求的是则返回中的数据。 关于标题，为什么是爱与恨？ 因为在 webpack 刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，api 设计不合理。随着 webpa...
摘要：简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着性能美观。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。字型子集设定到目前为止，子集设定是改善网页字体性能最快的方式。 作者 Declan 原文链接 最近更新了我们的网站，它是经过了设计上的全面验收的。但实际上，作为软件开发者，我们会注重很多技术相关的零碎的东西。我们的目标是控制性能，注重性...
阅读 3005·2023-04-26 03:01
阅读 3471·2023-04-25 19:54
阅读 1558·2021-11-24 09:39
阅读 1322·2021-11-19 09:40
阅读 4190·2021-10-14 09:43
阅读 2042·2019-08-30 15:56
阅读 1459·2019-08-30 13:52
阅读 1641·2019-08-29 13:05
