gulp-make-css-url-version-extend

gulp-make-css-url-version-extend 是在 gulp-make-css-url-version-s 基础上做了bug修复版本

修改了 gulp-make-css-url-version 增加版本号的方式：

原来的日期模式是"yy-mm-dd" 修改成以毫秒为序列号

原来的MD5模式引用字段过长引起CSS文件过大，现在截取前8位为版本号

解决图片url以域名 （"http://", "https://", "//"）为前缀导致找不到文件路径而无法修改版本号问题；

可过滤不需要修改版本号的路径

安装

npm install gulp-make-css-url-version-extend

使用

默认MD5模式

var makeUrlVer = require('gulp-make-css-url-version-extend');

gulp.task('stylesheets', function() {
    gulp.src('css/*.css')
        .pipe(makeUrlVer())
        .pipe(gulp.dest('dist'))
});

配置

使用日期模式：

var makeUrlVer = require('gulp-make-css-url-version-extend');

gulp.task('stylesheets', function() {
    gulp.src('css/*.css')
    //原格式：yy-mm-dd 修改后格式：201711061728(时间拼接精确到毫秒)  
        .pipe(makeUrlVer({useDate:true}))  
        .pipe(gulp.dest('dist'))
});

域名路径配置

var makeUrlVer = require('gulp-make-css-url-version-extend');
gulp.task('stylesheets', function() {
    gulp.src('css/*.css')
        .pipe(cssver({
            /*域名替换，路径必须以'/'结束 ;
              例如" http://abc.com/images/logo.png" 用'../'替换后你可以处理的路径是'../images/logo.png' */
            domainName:'../',  
            //过滤不需要加版本号的域名 
            excludeDomain:["//abc.cn/","http://abc.com/"]}))
        .pipe(gulp.dest('dist'))
});

assetsDir: specify the public directory for correct MD5 calculation in some specific cases

var makeUrlVer = require('gulp-make-css-url-version-extend');

gulp.task('stylesheets', function() {
    gulp.src('css/*.css')
        .pipe(makeUrlVer({
            assetsDir: __dirname + '/public'
        }))
        .pipe(gulp.dest('dist'))
});

Example

before: index.css

/* loading */
.i-loading{background:url(../images/loading.gif) ;} 
.logo{background:url(//js.abc.com/images/loading.png) ;}    
   

after: index.css

/* loading */
.i-loading{background:url(../images/loading.gif?v=Je0sUcMH)}
.logo{background:url(//js.abc.com/images/logo.png?v=Je0sUcMH) ;}