gulp常用插件-gulp-clean-css

使用

gulp-clean-css

压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。（之前的有同样功能的

gulp-minify-css

已被废弃）

github：https://github.com/scniro/gulp-clean-css

配置

gulpfile.js

例子一

var gulp = require('gulp'),
cssmin = require('gulp-clean-css');

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

例子二

var gulp = require('gulp'),
cssmin = require('gulp-clean-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'));
});

更多的gulp-clean-css的API请到这里了解：

https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api

例子三

给css文件里引用url加版本号（根据引用文件的md5生产版本号），像这样：

var gulp = require('gulp'),
cssmin = require('gulp-clean-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'));
});

若想保留注释，这样注释即可：

/*!
Important comments included in minified output.
*/

命令提示符执行：

gulp testCssmin