使用gulp构建前端（三）

                                                   使用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