gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
来源:互联网 发布:凯立德导航端口查询 编辑:程序博客网 时间:2024/05/29 15:21
2016-2-27 gulp自动添加版本号
"/css/base.css" => "/dist/css/base-1d87bebe.css"
"/js/mod.js" => "/dist/mod-61e0be79.js"
"/images/bg.png" => "/images/bg-35c3af8134.png"
但是由于公司发布系统限制,如果用上面方法实现,每次更新都会积压过多过期无用的文件,估我们希望的预期效果是:
"/css/base.css" => "/dist/css/base.css?v=1d87bebe"
"/js/mod.js" => "/dist/mod.js?v=61e0be79"
"/images/bg.png" => "/images/bg.png?v=35c3af8134"
因此我们需要对上面的gulp-rev-append插件进行改造。
1.安装Gulp
npm install --save-dev gulp
2.安装gulp-rev-append
npm install --save-dev gulp-rev-append
3.打开node_modules\gulp-rev-append\index.js
第9行 var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?rev=([^\s>"']+?)['|"]/gi;
更新为: var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?v=([^\s>"']+?)['|"]/gi;
4.将html和css中包含url,src等资源链接加上?v=@@hash
5.gulp运行
结果达到预期,如下:
Css
background: url('../img/bg.png?v=28bd4f6d18');
Html
href="css/base.css?v=885e0e1815"
src="js/mod.js?v=10ba7be289"
src="images/bg.png?v=28bd4f6d18"
6.gulpfile.js:
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin'); // 压缩html
var uglify = require('gulp-uglify'); // 压缩js
var less = require('gulp-less'); // less编译成css
var gulpConcat = require('gulp-concat'); // 合并文件
var minifyCss = require('gulp-minify-css'); // 压缩css
var imagemin = require('gulp-imagemin'); // 压缩图片
var pngquant = require('imagemin-pngquant'); // 使用pngquant深度压缩png图片的imagemin插件
var cache = require('gulp-cache'); // 只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:UsersAdministratorAppDataLocalTempgulp-cache)
var runSequence = require('gulp-run-sequence');
var rev = require('gulp-rev-append'); // 给URL自动添加MD5版本号
var autoprefixer= require('gulp-autoprefixer');
var del = require('del');
var htmlSrc = 'src/html/*.html';
var htmlDest = 'dist/html';
gulp.task('miniHtml', function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
return gulp.src(htmlSrc)
// .pipe(revCollector())
// .pipe(htmlmin(options))
.pipe(rev())
.pipe(gulp.dest(htmlDest));
});
var cssSrc = 'src/css/*.css';
var cssDest = './dist/css';
gulp.task('miniCss',function(){
return gulp.src(cssSrc)
// .pipe(less())
.pipe(rev())
// .pipe(cssmin())
.pipe(gulp.dest(cssDest));
});
gulp.task('miniJs', function() {
return gulp.src(['src/js/*/*.js','src/js/*.js'])
// .pipe(gulpif(
// condition, uglify()
// ))
// .pipe(rev())
// .pipe(rev.manifest())
.pipe(gulp.dest('dist/js'));
});
gulp.task('miniImages', function() {
gulp.src(['src/images/*/*.{png,jpg,gif,ico}','src/images/*.{png,jpg,gif,ico}'])
// .pipe(cache(imagemin({
// progressive: true,
// svgoPlugins: [{
// removeViewBox: false
// }],
// use: [pngquant()]
// })))
.pipe(gulp.dest('dist/images'));
});
gulp.task('build', function(done) {
runSequence(
['miniImages'],
['miniCss','miniJs'],
['miniHtml'],
done);
});
gulp.task('default', ['build']);
7.结束语
今天的方法是由看到别人通过改造gulp-rev和gulp-rev-collector来实现将MD5版本号收到启发,自己修改gulp-rev-append插件实现同样的效果。但是有一点点很遗憾,对CSS中background:url()的匹配还存在一点点不足,url()必须带单引号或者双引号才能被正确匹配的到,但是CSS的标准写法中,通常不会带单引号或者双引号。只可惜我对正则表达式理解不够,已经提交问题给大神求解了,希望明天有更好的正则表达式可以做到完美匹配。
0 0
- gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
- gulp自动添加版本号
- Gulp自动添加版本号
- gulp自动添加静态文件版本号方案
- Gulp开发:Gulp自动添加版本号
- gulp常用插件之gulp-rev-collector(给资源文件加时间戳)
- gulp常用插件之gulp-rev-collector(给资源文件加时间戳)
- gulp教程之gulp-rev-append
- gulp入门(15)- gulp-rev-append
- 使用gulp实现静态资源版本号替换
- gulp为项目文件添加版本号
- 利用gulp之gulp-rev-collector给资源文件加时间戳,解决缓存版本控制
- 缓存进阶处理:从不处理到基于gulp的前端静态文件自动添加版本号
- 使用gulp为项目中的文件自动添加版本号之实践思路
- gulp自动添加版本号过程中的一些要点记录
- gulp 给静态资源文件添加hash(md5)后缀 防止缓存
- gulp 给静态资源文件添加hash(md5)后缀 防止缓存
- 使用gulp对引用的文件添加版本号
- 抽象形式的观察者模式以及观察者模式的使用介绍
- UVA 10791(p317)----Minimum Sum LCM
- LeetCode 12. Integer to Roman & 13. Roman to Integer
- spirngMVC+Hibernate+SpringSecuirty+Extjs一个简单的权限管理系统
- UVA 10801(p381)----Lift Hopping
- gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
- XAMPPS1.8.5工具单独升级php版本(5.2升级到5.4.45)
- UVA 10820(p322)----Send a Table
- HashMap的介绍和基本使用方法
- bootstrap Snippets使用方法
- hello CSDN
- PID控制相关在线教程
- Python学习笔记(四) 多重继承及内部算法解析
- 数据结构算法之排序系列Java、C源码实现(2)--希尔排序