一个项目如果使用一份css那么会导致css文件很大，网络上提供了不少的css压缩工具，但是都有一个问题，每次修改每次都需要手动执行压缩的过程。

如何监听程序猿修改css，并自动压缩呢。

这里用到的是gulp。

nodejs的npm命令下载gulp，记得，项目和全局都需要gulp。

接着编写脚本。

这里直接放代码。

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
gulp.task('css', function() {
console.log('----------------------------------');
console.log('监听到css修改，执行压缩。时间：' + getTime());
gulp.src('source/css/*.css').pipe(minifyCSS()).pipe(gulp.dest('website/css'));
})
gulp.task('auto', function() {
gulp.watch('source/css/*.css', ['css']);
})
gulp.task('default', ['css', 'auto']);
function getTime() {
var myDate = new Date();
return myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds() + '.' + myDate.getMilliseconds();
}

我把源代码放到source的文件下下，作为编写的时候的文件，把压缩的文件放到website下的css中，让页面引用。

为了查看压缩是否正常，加入了分割线和时间输出。

结果如下。