css压缩

写完CSS，或者用Scss编译成css之后，想把css进行压缩。

gulp-clean-css

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

$ npm install gulp-clean-css --save-dev

用法

cleanCSS([options], [callback])

参数

options

要知道options怎么用，还要看CleanCSS的原始文档，原来npm的世界里都是依赖来依赖去，一个包的核心功能，可能仅仅是对另外一个包的演进，或者多个包的整合，实际上gulp也是对多个包的整合，在给自己披上了一层壳而已。

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});

callback

回调函数。

回调函数的参数是minify()的结果，它会包含minified的文件信息。举个例子：

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
    return gulp.src('styles/*.css')
        .pipe(cleanCSS({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(gulp.dest('dist'));
});

而且Source Maps也能被gulp-sourcemaps简单的生成：

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('minify-css', function() {
    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(cleanCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'));
    });
});