原文:http://www.ydcss.com/archives/41
簡介:
使用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