簡介：
使用gulp-minify-css壓縮css文件，減小文件大小，並給引用url添加版本號避免緩存。重要：gulp-minify-css已經被廢棄，請使用gulp-clean-css，用法一致。
1、安裝nodejs/全局安裝gulp/本地安裝gulp/創建package.json和gulpfile.js文件
1.1、gulp基本使用還未掌握？請參看： gulp詳細入門教程
1.2、本示例目錄結構如下：
2、本地安裝gulp-minify-css
2.1、github：https://github.com/jonathanepollack/gulp-minify-css
2.2、安裝：命令提示符執行 cnpm install gulp-minify-css --save-dev
2.3、注意：沒有安裝cnpm請使用 npm install gulp-minify-css --save-dev 什么是cnpm，如何安裝？
2.4、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。為什么要保存至package.json？
3、配置gulpfile.js
3.1、基本使用
|
1
2
3
4
5
6
7
8
|
var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});
|
3.2、gulp-minify-css 最終是調用clean-css，其他參數查看這里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssmin({
advanced: false,//類型：Boolean 默認：true [是否開啟高級優化（合並選擇器等）]
compatibility: 'ie7',//保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
keepSpecialComments: '*'
//保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
}))
.pipe(gulp.dest('dist/css'));
});
|
3.3、給css文件里引用url加版本號（根據引用文件的md5生產版本號），像這樣：
|
1
2
3
4
5
6
7
8
9
10
11
|
var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
//確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
cssver = require('gulp-make-css-url-version');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssver()) //給css文件里引用文件加版本號（文件MD5）
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});
|
3.3、若想保留注釋，這樣注釋即可：
|
1
2
3
|
/*!
Important comments included in minified output.
*/
|
4、執行任務
4.1、命令提示符執行：gulp testCssmin
