gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号

2016-2-27 gulp自动添加版本号


gulp有很多插件可以实现URL添加MD5版本号,使用gulp-rev和gulp-rev-collector是比较方便的方法,结果如下:

"/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, //删除

你可能感兴趣的:(web)