前端自動化構建工具-gulp

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

一、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，以後就能夠經過管道流組合本身想要的任務。

二、如何使用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（這個是提醒插件）

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

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

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

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

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

四、接着講壓縮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文件，這個就是壓縮後的文件了。

五、監聽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一直都彷佛一份最新的文件，並不會每次保存一份）。