使用gulp构建前端（三）

 紧接着上述文章内容，开始新的插件的使用

  插件三

   gulp-clean-css，作用减小文件大小，并给引用url添加版本号避免缓存，一个需要注意的是很多同学如果看到一些比较老的版本就可能会使用，gulp-minify-css，实际上，后者已经没人维护了，不过两者用法基本上是一致的。

      还是一样的先安装

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

      然后编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方cssmin =require('gulp-clean-css');gulp.task('css',function(){return  gulp.src('source/css/*.css').pipe(cssmin()).pipe(gulp.dest('build/css'));
});gulp.task('default', ['css']);

    然后编写css文件

.box {color: #fe33ac;border-color: #fdcdea;
}
.......
其他代码内容

    执行gulp命令，压缩效果达到：5-6倍（不过只是一个简单的测试，不服责任系列哈）

   插件四

   gulp-uglify，作用minjs文件

     安装插件 gulp-uglify

npm install gulp-uglify --save-dev

     编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方jsmin = require('gulp-uglify'),;gulp.task('js',function(){return gulp.src('source/js/*.js').pipe(jsmin()).pipe(gulp.dest('build/js'));});
gulp.task('default', ['js']);

       编写js文件执行gulp，min结果一般

插件3的github地址：https://github.com/scniro/gulp-clean-css

插件4的github地址：https://github.com/terinjokes/gulp-uglify