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