gulp 和grunt這兩個是我知道的自動構建工具，但是說實話都沒在項目中用過，不太清楚自動化構建是什麽意思，

1、grunt和gulp有什麽相同點和不同點？

　　（1）、易於使用：采用代碼優於配置策略，gulp讓簡單的事情繼續簡單，復雜的任務變得可管理；

　　（2）、高效：通過利用Node.js強大的流，不需要網磁盤寫中間文件，可以更快地完成構建；

　　（3）、高質量：gulp嚴格的插件知道發昂真，確保插件簡單並且按照你期望的方式工作；

　　（4）、易於學習：通過把API降到最少，你能在很短的時間內學會gulp，構建工作就像你設想的一樣：是一系列流管道；

　　（5）、易用gulp相比grunt更簡潔，而且遵循代碼優於配置的策略，維護gulp更像是寫代碼。高效gulp相比grunt更有設計感，核心設計基於unix流的概念，通過管道連接，不需要寫中間件，高質量gulp的每個插件只完成一個功能，這也似乎unix的設計原則之一，各個功能通過流進行整合並完成復雜的任務。例如：grunt的imagemin插件不僅壓縮圖片，同事還包括緩存功能。他表示，在gulp中，緩存是另一個插件，可以被別的插件使用，這樣就錯金了插件的可重用性。易學gulp的核心API只有5個，掌握了5個API就學會了gulp，之後就可以通過管道流組合自己想要的任務。

2、如何使用gulp配置自己的項目

　　（1）、想要在項目中使用gulp，就要全局安裝gulp，執行命令如下

　　npm install gulp -g

　　這樣就算是在計算機上安裝了全局gulp，也就意味著可以使用Gulp中的模塊了（必須全局安裝，局部安裝，cmp中gulp命令不能執行）。

　　（2）、建立文件夾

　　　　　　新建文件夾managres,managers下面新建兩個文件夾dist和src，一個表示源頭，一個表示輸出，然後通關過git bash工作在managers文件夾下執行命令

　　　　　　nom init ---用於生成package.json文件

　　　　回車之後，gulpManagers下目錄結構如下圖：

　　　　（3）、開始安裝需要用到的插件，這裏我做幾個中要的說明一下，其他的插件可以自己去摸索

　　　　npm install --save-dev gulp（save-dev指的是把gulp配置到本項目的package.json文件下，因為你要使用人家的插件，肯定需要他來指揮）

　　　　npm install --save-dev gulp-uglify（這個插件是用來壓縮js的）

　　　　npm install --save-dev gulp-ruby-sass（這個是用來編譯sass的）

　　　　npm install --save-dev gulp-notify（這個是提醒插件）

3、講解一下gulp總要的4個API

　　gulp.src();表示文件的來源，或者說是讀取文件

　　gulp.dest();表示文件的輸出，也就是輸出文件

　　gulp.task();表示要執行的任務

　　gulp.watch();表示要監聽的任務

4、接著講壓縮js

　　在gulpManagers文件夾下新建gulifile.js，在src文件夾下新建文件夾js，並在js文件夾下新建文件index.js

　　(1)、如何去自己寫人物文件(gulpfile.js)

//引入需要的插件
var gulp =require(‘gulp‘);
var uglify=require(‘gulp-uglify‘);
var notify=require(‘gulp-notify‘);

//布置任務
gulp.task(‘uglify‘,function(){
    gulp.src(‘src/js/**/*.js‘)  //讀取項目中的js文件
        .pipe(uglify())  //利用插件進行壓縮
        .pipe(gulp.dest(‘dist/js‘))  //壓縮過後偶輸出文件到指定目錄
        .pipe(notify({message:‘uglify is ok‘}))   //提醒你：壓縮任務完成了
})

　　（2）、現在dist文件夾下面新生成了一個js文件夾，裏面有一個index.js文件，這個就是壓縮後的文件了。

5、監聽js的改變

　　或許有人會問，如果的js文件變動了，能不能監聽到呢？

　　在gulp你可以通過watch來監聽js的改變

　　（1）、將gulpfile.js文件裏面原本的東西註釋掉，將dist文件下所有東西刪除掉，新寫gulpfile.js文件

//引入需要的插件
var gulp=require(‘gulp‘);
var uglify=require(‘gulp-uglify‘);
var notify=require(‘gulp-notify‘);

//布置任務
gulp.task(‘uglify‘,function(){
    gulp.src(‘src/js/**/*.js‘)  //讀取項目中的js文件
        .pipe(uglify())   //利用插件進行壓縮
        .pipe(gulp.dest(‘dist/js‘))  //壓縮過後輸出到文件指定目錄
        .pipe(notify({message:"uglify is ok"}))  //提醒任務完成
})

gulp.task(‘watch‘,function(){
    gulp.watch("src/js/**/*.js",["uglify"])  //監聽文件夾下js變化，執行壓縮任務
})
　　（2）、在cmd中執行watch：gulp watch    回車，現在去src/js/index.js下面改動內容，點擊保存的時候，會出現提醒消息：uglify is ok。
並且在dist/js下面多了一個新壓縮的index.js文件。（多次改動src/js下index.js文件，點擊保存，執行壓縮，dist/js/index.js一直都似乎一份最新的文件，並不會每次保存一份）。

前端自動化構建工具-gulp