Giter VIP home page Giter VIP logo

gulp-make-css-url-version-extend's Introduction

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) ;}    

gulp-make-css-url-version-extend's People

Watchers

 avatar  avatar

gulp-make-css-url-version-extend's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.