由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下:

1.安装gulp插件

npm install --save-dev gulp-rev (version:9.0.0)
npm install --save-dev gulp-rev-collector (version:1.3.1)
npm install --save-dev run-sequence (version:2.2.1)

2.修改gulpfile.js文件


//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
... //此处省略sass等配置
... //定义css、js源文件路径
var cssSrc = 'dist/**/*.css', //dist下css所有文件
jsSrc = 'dist/**/*.js' ; //dist下所有js文件 //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss',function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'));
}) //JS生成文件hash编码并生成rev-manifest.json文件名对照映射
gulp.task('revJs',function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest)
.pipe(gulp.dest('dist/rev/js'));
}) //Html替换css、js版本
gulp.task('revHtml',function(){
return gulp.src(['dist/rev/**/*.json','dist/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist'));
}) //开发构建
gulp.task('dev',function(done){
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);
})
gulp.task('default',['sass','html','images','watch','scripts','dev']);

3.修改node_module里相关配置文件

(1)更改gulp-rev文件(node_modules--->gulp-rev--->index.js)

将 manifest[originalFile] = revisionedFile;
改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;

(2)更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

将 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

改为 var cleanReplacement =  path.basename(json[key]).split('?')[0];

(3)更改rev-path文件(node_module--->gulp-rev--->node_module--->rev-path--->index.js)

将 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

(4)更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

    将  regexp: new RegExp( prefixDelim + pattern, 'g' ),
改为 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

然后在项目目录下执行gulp 即可自动为css,js文件生成版本号

gulp为css,js添加版本号的更多相关文章

  1. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  2. 关于Js添加版本号

    背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就 ...

  3. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

  4. ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

    写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...

  5. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  6. 前端静态资源版本更新与缓存之——gulp自动化添加版本号

    公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...

  7. 使用gulp添加版本号

    由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: ...

  8. 给js加版本号解决浏览器缓存问题

    我们知道打开网页时浏览器会加载需要的资源,比如图片.音频.js文件.css文件等.并且会把这些资源作为缓存保存下来,再次打开网页时缓存好的资源就不需要再次加载了.但是,这样有一个问题,就是当程序猿更新 ...

  9. asp.net mvc项目实记-开启伪静态-Bundle压缩css,js

    百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...

随机推荐

  1. Sending form data

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data This arti ...

  2. thinkphp 带检索参数分页

    模板文件中,提交搜索内容要用get方法,同时设置g.m.c隐藏域. <form action="{:U('Sck/qbscHjsc')}" method="get& ...

  3. 牛客提高D5t1 deco的abs

    分析 傻子题? 对d取模后随便贪心即可 代码 #include<iostream> #include<cstdio> #include<cstring> #incl ...

  4. 网路编程之socket与 socketserver、黏包

    socket与socketerver才是我们学习python中网络编程的重中之重在介绍他们两个之前我先介绍一些相关知识 一.socket 概念 咱们现在ois模型中找到socket所承担的角色 soc ...

  5. vue里面的this指向

    this.$http.jsonp(api).then(function(response){ console.log(response); console.log(this); this.list=r ...

  6. DataScope v1.0 多功能串口虚拟示波器使用介绍

    DataScope v1.0 特性 1.无需安装,启动即用;2.支持同时刷新多达10个通道的单精度浮点型数据;3.支持多种格式的通道数据导入.导出及回放;4.支持全屏浏览;5.支持图表数据统计.测量及 ...

  7. 将原生JS和jquery里面的DOM操作进行了一下整理

    创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...

  8. Iterator 和 ListIterator 对比

    Iterator 的方法 //是否还有下一个 boolean hasNext(); //返回下一个 E next(); //移除返回的下一个 void remove(); ListIterator 的 ...

  9. 云计算openstack核心组件——keystone身份认证服务

    一.Keystone介绍:       keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户 ...

  10. Vagrant 入门 - 清理(teardown)

    原文地址 我们现在有一个功能齐全的虚拟机,可以用于基本 Web 开发.但如果现在需要更换设备,或者在另一个项目上工作,如何清理我们的开发环境? 借助 Vagrant,可以暂停(suspend),停止( ...