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