| 一、概述&安裝 |
Gulp，簡而言之，就是前端自動化開發工具，利用它，我們可以提高開發效率。
比如：
1、 壓縮js
2、 壓縮css
3、 壓縮less
4、 壓縮圖片
等等…
我們完全可以利用Gulp來自動化地完成這些重復性很強的工作。
好了，廢話不多說了。既然要了解Gulp，就得先安裝它。
Gulp是基於node來實現的，so你得先有個node環境（見“初探nodeJS”）。
node環境有了后，安裝Gulp就很easy咯。
命令行中，輸入npm install gulp –g就OK啦。（-g代表全局）。
如下：
安裝完成后，輸入gulp –v查看是否安裝成功。
如下：
但，就算你這么安裝了全局gulp，你每次到項目中時，還得在相應目錄下安裝gulp。
原因就是，gulp就這么設置的，避免發生版本沖突。
所以這步安裝gulp可以可無，不過就當初步了解它嘛。
| 二、小試牛刀之壓縮Javascript |
因為gulp是自動化工具，所以我們得告訴它，需要怎么做，才能達到我們的目的。
我們首先得新建一個js文件，用來編寫我們的需求，以便gulp能按着我們的意願來執行。
如，我將這個js文件取名叫gulpfile( 且必須取為gulpfile名，否則在node環境下運行是，會報錯：No gulpfile found)，並放置在D盤中的gulp文件夾里。
隨后，打開新建的gulpfile.js，開始我們的壓縮JavaScript之路吧。
gulp作為node的一個模塊，所以，第一步我們得在gulpfile.js里引入gulp這個模塊。
如下：
接着，因為我們此次的目的是壓縮JavaScript，所以還得引入一個壓縮Javascript的模塊（gulp-uglify）
如下：
最后，就是具體編寫我們的需求了。
如我的需求是，將script文件夾中的JavaScript文件壓縮到newScript文件夾中。
具體代碼如下：
//引入gulp var gulp = require('gulp'); //引入gulp-uglify模塊，用於壓縮JS var uglify = require('gulp-uglify'); //'firstScript'為我們自定義的任務名，匿名函數為'firstScript'具體任務 gulp.task('firstScript', function(){ // 'script/*.js'是即將壓縮的js文件 gulp.src('script/*.js') //uglify()是調用的壓縮方法，去壓縮js .pipe(uglify()) //gulp.dest是將壓縮后的文件另存為哪的方法，如存到newScript文件夾中 .pipe(gulp.dest('newScript')); });
好了，在node環境下運行上述代碼，不過不是利用node哈，因為是gulp，所以得用gulp命令，如下（’firstScript’為剛才自定義的任務名）：
敲擊回車，執行：
但是，報錯。
原因：我們就沒有將gulp、gulp-uglify這兩個模塊到本地嘛。
咦，gulp，我們不在前面安裝了么？安裝的全局gulp呢
是的，是安裝了，但是大概為了避免gulp的版本沖突吧，所以我們還得安裝，所以全局安裝沒卵用。
請在命令中輸入npm install gulp和npm install gulp-uglify安裝它們。安裝好后，會發現在相應目錄下會多出個node_modules的文件夾，里面就涵蓋了我們安裝的模塊。
另外，再在script文件夾中加入一段js代碼用來測試壓縮效果，如：
function hello(){ console.log('hello world'); };
好了，再次運行上述代碼。
得下圖：
Perfect！！這就壓縮好了，我們在script文件夾中發現多了一個newScript文件夾，且，里面有壓縮好的js文件哦。
截取壓縮好的js如下：
但，不知道大家發現上述的代碼有個不足沒？
如果文件改變了，我們每次都得自己手動在node環境下，輸入gulp + 相應任務名執行操作。
說好的自動化呢？
所以我們得修改上述代碼，讓其自動化--一旦script文件下的js文件變動，就自己自行壓縮。
利用gulp.watch方法，可監聽文件，來彌補這一不足，如：在這里監聽script下的js文件。（一旦變化，就自動壓縮)
如下：
//引入gulp var gulp = require('gulp'); //引入gulp-uglify模塊，用於壓縮JS var uglify = require('gulp-uglify'); //'firstScript'為我們自定義的任務名，匿名函數為'firstScript'具體任務 gulp.task('firstScript', function(){ // 'script/*.js'是即將壓縮的js文件 gulp.src('script/*.js') //uglify()是調用的壓縮方法，去壓縮js .pipe(uglify()) //gulp.dest是將壓縮后的文件另存為哪的方法，如存到newScript文件夾中 .pipe(gulp.dest('newScript')); }); //新增一個auto任務 gulp.task('auto', function(){ //利用watch方法監聽script下的js文件，如果變動，則執行firstScript任務 gulp.watch('script/*.js', ['firstScript']); });
執行上述，只需在node環境下輸入gulp auto就OK啦，一旦script文件下的js文件改變，它就自動壓縮。
且，因為是監聽，所以當輸入gulp auto時，不會首先壓縮一遍script下js文件。
But，我們不還得輸入’auto’這個任務名嗎？！！
所以，為了更加完善，我們可以這么做：
//引入gulp var gulp = require('gulp'); //引入gulp-uglify模塊，用於壓縮JS var uglify = require('gulp-uglify'); //'firstScript'為我們自定義的任務名，匿名函數為'firstScript'具體任務 gulp.task('firstScript', function(){ // 'script/*.js'是即將壓縮的js文件 gulp.src('script/*.js') //uglify()是調用的壓縮方法，去壓縮js .pipe(uglify()) //gulp.dest是將壓縮后的文件另存為哪的方法，如存到newScript文件夾中 .pipe(gulp.dest('newScript')); }); //新增一個auto任務 gulp.task('auto', function(){ //利用watch方法監聽script下的js文件，如果變動，則執行firstScript任務 gulp.watch('script/*.js', ['firstScript']); }); //將需要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務 gulp.task('default',['auto']);
注：default任務名不能改變哦。
這樣我們就可以直接在node環境下：gulp + 回車，去執行default中的相關任務。
但，上述代碼還是不夠完美，且不足還很大，就是：當gulp.watch方法監聽到script文件夾中的某個js代碼發生改變時，gulp會將script下所有的js都壓縮一遍，極大地影響性能。(不信，自己可以測試下)
納尼？這可如何是好。
不用怕，利用gulp-watch-path這個模塊，就可以做到修改了什么，就實時壓縮對應文件，而不是盲目地全壓縮。
代碼如下：
//引入gulp var gulp = require('gulp'); //引入gulp-uglify模塊，用於壓縮JS var uglify = require('gulp-uglify'); //引入gulp-watch-path var watchPath = require('gulp-watch-path'); //'firstScript'為我們自定義的任務名，匿名函數為'firstScript'具體任務 gulp.task('firstScript', function(){ // 'script/*.js'是即將壓縮的js文件 gulp.src('script/*.js') //uglify()是調用的壓縮方法，去壓縮js .pipe(uglify()) //gulp.dest是將壓縮后的文件另存為哪的方法，如存到newScript文件夾中 .pipe(gulp.dest('newScript')); }); //新增一個auto任務 gulp.task('auto', function(){ //利用watch方法監聽script下的js文件，如果變動，則執行firstScript任務 //gulp.watch('script/*.js', ['firstScript']); //event為gulp.watch回調函數中的event gulp.watch('script/*.js', function(event){ var paths = watchPath(event, 'script', 'newScript'); gulp.src(paths.srcPath) .pipe(uglify()) //paths.distDir為目錄文件，如果換成paths.distPath，會報錯：file already exists .pipe(gulp.dest(paths.distDir)); }); }); //將需要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務 gulp.task('default',['auto']);
上述代碼已經很完美了，但是壓縮的文件名與沒壓縮的文件名一樣滴，總感覺怪怪的，不是么？通常壓縮文件應該帶有min的后綴吧。所以我們再來修改修改。
引入gulp-rename這個模塊，用於重命名壓縮后的文件。
代碼如下：
//引入gulp var gulp = require('gulp'); //引入gulp-uglify模塊，用於壓縮JS var uglify = require('gulp-uglify'); //引入gulp-watch-path var watchPath = require('gulp-watch-path'); //引入gulp-rename var rename = require('gulp-rename'); //'firstScript'為我們自定義的任務名，匿名函數為'firstScript'具體任務 gulp.task('firstScript', function(){ // 'script/*.js'是即將壓縮的js文件 gulp.src('script/*.js') //uglify()是調用的壓縮方法，去壓縮js .pipe(uglify()) //給壓縮后的文件，添加min后綴名 .pipe(rename({suffix: '.min'})) //gulp.dest是將壓縮后的文件另存為哪的方法，如存到newScript文件夾中 .pipe(gulp.dest('newScript')); }); //新增一個auto任務 gulp.task('auto', function(){ //利用watch方法監聽script下的js文件，如果變動，則執行firstScript任務 //gulp.watch('script/*.js', ['firstScript']); //event為gulp.watch回調函數中的event gulp.watch('script/*.js', function(event){ var paths = watchPath(event, 'script', 'newScript'); gulp.src(paths.srcPath) .pipe(uglify()) //給壓縮后的文件，添加min后綴名 .pipe(rename({suffix: '.min'})) //paths.distDir為目錄文件，如果換成paths.distPath，會報錯：file already exists .pipe(gulp.dest(paths.distDir)); }); }); //將需要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務 gulp.task('default',['auto']);
OK，gulp來壓縮JavaScript之路，就到此為止咯。
| 三、其他 |
類似的：CSS、LESS、圖片等的壓縮與上述”小試牛刀之壓縮JavaScript”其實是一樣的道理，唯一的不同就是它們所引入的壓縮包不一樣。
如：
CSS ----- 對應gulp-minify-css模塊
LESS ----- 對應gulp-less模塊
圖片 ----- 對應gulp-imagemin模塊
...
晚安，everyone~