gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
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, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除