https://github.com/w3cui/gulp-make-css-url-version-extend

gulp-make-css-url-version-extend
https://github.com/w3cui/gulp-make-css-url-version-extend

Last synced: about 5 hours ago
JSON representation

gulp-make-css-url-version-extend

• Host: GitHub
• URL: https://github.com/w3cui/gulp-make-css-url-version-extend
• Owner: w3cui
• Created: 2018-01-23T07:27:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-16T07:14:06.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T04:04:41.507Z (7 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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://", "//"）为前缀导致找不到文件路径而无法修改版本号问题；

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


## 安装

```bash

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

```

## 使用

默认MD5模式

```js

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

gulp.task('stylesheets', function() {

    gulp.src('css/*.css')

        .pipe(makeUrlVer())

        .pipe(gulp.dest('dist'))

});

```

## 配置

使用日期模式：


```js

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'))

});

```

##### 域名路径配置

```js

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

```js

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

```css

/* loading */

.i-loading{background:url(../images/loading.gif) ;} 

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

   

```

### after: index.css

```css

/* loading */

.i-loading{background:url(../images/loading.gif?v=Je0sUcMH)}

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

```