為什么80%的碼農都做不了架構師？>>> ??

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

?

轉載于:https://my.oschina.net/QAAQ/blog/707858

總結

以上是生活随笔為你收集整理的使用gulp构建前端（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。