版本号用文件MD5生成

默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变

所以当没有改变文件的时候,我们就不能用gulp来改变版本号了

需要安装的插件

 npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence

gulpfile.js代码

//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'); //定义css、js源文件路径
var cssSrc = 'css/*.css',
jsSrc = 'js/*.js'; //为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc) //该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //编译后的路径
}); //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('default', function (done) {
condition = false;
runSequence( //需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.
['assetRev'],
['revCss'],
['revJs'],
['revHtml'],
done);
});

3、更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js

第144行 manifest[originalFile] = revisionedFile;

更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开node_modules\rev-path\index.js

10行 return filename + '-' + hash + ext;

更新为: return filename + ext;

打开node_modules\gulp-rev-collector\index.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) ) {

打开node_modules\gulp-assets-rev\index.js

78行 var verStr = (options.verConnecter || "-") + md5;

更新为:var verStr = (options.verConnecter || "") + md5;

80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");

更新为:src=src+"?v="+verStr;

4、继续更改gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js

第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),

更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' )

再次运行就能成功了

改变单个文件的内容,再次运行gulp,发现版本号又改变了

gulp给文件加版本号的更多相关文章

  1. gulp自动化压缩合并、加版本号解决方案

    虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...

  2. gulp给文件后添加md5时间戳

    这里为总的方法,实际项目中拷贝出来的,底下有详细的总结以及只针对添加时间戳的方法 1 // 引入 gulp及组件 var gulp = require('gulp'), autoprefixer = ...

  3. spring cloud: zuul(四): 正则表达式匹配其他微服务(给其他微服务加版本号)

    spring cloud: zuul(四): 正则表达式匹配其他微服务(给其他微服务加版本号) 比如我原来有,spring-boot-user微服务,后台进行迭代更新,另外其了一个微服务: sprin ...

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

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

  5. 在Js或者cess后加版本号 防止浏览器缓存

    在Js或者cess后加版本号 防止浏览器缓存 客户端浏览器会缓存css或js文件,从而减少加载次数,减少流量,提高网页的访问速度.为了使得每次修改js或者css能生效,可以通过改变版本号来使得客户端浏 ...

  6. scrapy cookies:将cookies保存到文件以及从文件加载cookies

    我在使用scrapy模拟登录新浪微博时,想将登录成功后的cookies保存到本地,下次加载它实现直接登录,省去中间一系列的请求和POST等.关于如何从本次请求中获取并在下次请求中附带上cookies的 ...

  7. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  8. 简单粗暴的对android so文件加壳,防止静态分析

    转载自http://bbs.pediy.com/showthread.php?t=191649 以前一直对.so文件加载时解密不懂,不了解其工作原理和实现思路.最近翻看各种资料,有了一些思路.看到论坛 ...

  9. php基础知识(3)(文件加载include)

    文件加载 综述: 有4个文件加载的语法形式(注意,不是函数): include,  include_once,  require, require_once; 他们的本质是一样的,都是用于加载/引入/ ...

随机推荐

  1. windows Zookeeper本地服务化

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  2. python 内建函数专题

    all 用来控制 import , 甚至可以改变 _private 为 public enter , exit 用于上下文管理器 iter 用于迭代器 repr 给计算机读, str ==> s ...

  3. HTML5的manifest 本地离线缓存

    下面直接放测试代码: index.html <!DOCTYPE html> <html manifest="m.manifest"> <head> ...

  4. tessaract ocr简介

    Tesseract的历史Tesseract是一个开源的OCR引擎,惠普公司的布里斯托尔实验室在1984-1994年开发完成.起初作为惠普的平板扫描仪的文字识别引擎.Tesseract在1995年UNL ...

  5. MySQL 之 数据库自动生成ID格式化编号(字符串格式化填充/拼接/时间)

    # 用户账号:1-4位:入职年份:5-6位:入职月份:7-11位:员工入职顺序号 select concat( date_format(now(),'%Y'), date_format(now(),' ...

  6. luogu P3760 [TJOI2017]异或和

    传送门 对于每个二进制位考虑有多少区间和这一位上为1 从前往后扫每个前缀和,如果当前这个前缀和某一个二进制位上为1,因为区间和由这个前缀和减去前面的前缀和得来,如果减去了这一位为0的前缀和,那么 减去 ...

  7. TDateTimePicker 选择最小日期时异常处理

    TDateTimePicker 控件属性窗体选择最小日期,运行时选择时可以看到的最小的日期,但是选择最小时就异常 :date is less than minimum of  ***     解决过程 ...

  8. Ubuntu/Debian apt-get 404 Not Found Package Repository Errors,无法找到包的错误

    最简单最常用的方法是,使用如下命令更新到新的版本: sudo apt-get dist-upgrade 但是这个方法有时候不一定能起作用,那么可以使用以下直接替换的命令: sudo sed -i -e ...

  9. vux安装中遇到的坑

    1.输入 npm install vux --save 2.输入 npm install vux-loader --save-dev(没安装的时候,会一直报错) 3.build/webpack.bas ...

  10. 如何解决OpenStack创建虚拟机或删除虚拟机时一直处于deleting或者creating状态的问题(转载)

    原文地址:http://www.cnblogs.com/robertoji/p/4968280.html 在OpenStack使用时,有时候会遇到创建虚拟机或者删除虚拟机无法成功创建或者删除的时候,一 ...