前言 最近在通過教學視頻學習angularjs，其中有gulp的教學部分，對其的介紹為可以對文件進行合併，壓縮，格式化，監聽，測試，檢查等操作時，看到前三種功能我的心理思想是，網上有很多線上壓縮，線上解壓，css格式化，js格式化類似的工具，為什麼還需要學習一項新技術呢。當學完了之後，被自己見識短淺 ...
前言
最近在通過教學視頻學習angularjs，其中有gulp的教學部分，對其的介紹為可以對文件進行合併，壓縮，格式化，監聽，測試，檢查等操作時，看到前三種功能我的心理思想是，網上有很多線上壓縮，線上解壓，css格式化，js格式化類似的工具，為什麼還需要學習一項新技術呢。當學完了之後，被自己見識短淺而羞愧。
1 gulp的優點
在做一個項目是，如果這個項目比較大，文件比較多，那這些文件的合併，壓縮，格式化，監聽，測試，檢查等操作該怎麼完成呢？如果像上面我所說的那樣通過一些線上功能進行操作的話，任務量比較大，而且當我們對多個文件進行改動的話，又得重新一個個的手動線上壓縮等操作，顯然不是很高效，那麼此時gulp就能幫我們高效的完成這些工作。反正當我學完了之後有一種 近視眼帶上了眼鏡的感覺（哈哈，這個比喻不知道有沒有人能領悟到是什麼感覺）。
類似於gulp，還有grunt，因為我只學過gulp，而且在github上gulp的使用更多，所以我選擇這個，具體用哪個，各憑喜好。
2 安裝gulp
首先應確保已經安裝了nodejs環境和npm（檢驗是否安裝的方法:node -v,npm -v）。然後以全局的方式安裝gulp
npm gulp -g 安裝完成後可以通過gulp -v 檢驗是否安裝成功及gulp的版本號
-g global 全局安裝
--save將配置信息保存在package.json中（package.json在項目的根目錄中），這樣做的一個好處是，別人拿到這個項目即使沒有node_modules文件夾時，只要在命令行輸入 npm install name項目所需要的插件都會被下載下來
-dev 保存至package.json的devDependencies節點，不指定的話保存至dependencies節點
3 如何在項目中使用gulp
- 新建一個項目目錄：demo_gulp
- 在這個目錄下本地安裝gulp npm install gulp 如果想在安裝的時候把gulp寫進項目package.json文件的依賴中，則可以加上--save-dev： npm install --save-dev gulp 為什麼要安裝兩次，點這裡
- 新建package.json配置文件：
npm init：
紅色的框是npm init後需要填寫的配置信息 如果預設，按回車即可，藍色的框是，配置完成後的確認信息
配置完成後，在根目錄下會自動新建一個package.json的文件,文件的信息就是配置文件時填寫的信息
4.在根目錄新建gulpfile.js文件，將以下代碼複製到gulpfile.ls中
var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello gulp');
});
在命令行中輸入 gulp default,輸出如下圖：
到這裡就已經實現了gulp的一個簡單的應用，
4.gulp的4個屬性 src，dest , watch , task
gulp.task(task_name,fn) 定義一個任務，在命令行中執行這個任務，如上面輸出“hello gulp”的代碼就是一個名為“default”的任務
gulp.src('XX/XX/XX.js/css/less/...') 匹配文件並輸出。括弧裡面的參數可以是文件的路徑，也可以是文件路徑組成的數組
gulp.dest() 將傳入的文件寫進來，如果文件夾不存在會自動創建文件夾
gulp.watch('XX/XX/XX.js/css/less/...',[task_name]) 監聽文件；第一個參數可以是某一個文件，也可以是多個文件組成的數組，第二個參數是多個任務的名字組成的數組
pipe（）字面意思：管道；此方法是把一個文件流輸入，通過pipe管道輸出（下一個處理程式可以把上一級輸出的流文件當做輸入）
下麵這個例子是將src文件夾下麵的demo.css複製到src 文件夾下麵的style文件夾下麵的css文件夾下，代碼寫好後在命令行執行 gulp copy任務即可，如下圖命令行截圖
gulp.task('copy',function(){
gulp.src('./src/demo.css') //匹配src文件夾下的demo.css文件並輸出
.pipe(gulp.dest('./src/style/css'));
});
下麵是文件監聽的代碼和命令行截圖：
gulp.task('watch',function(){
gulp.watch('./src/demo.css',['copy']);
})
當src文件下的demo.css發生改變時，就會執行copy任務，如下圖，每一次對src下麵的demo.css的改變進行保存操作，，命令行都會自動的執行copy任務
5.gulp的一些常用插件
gulp的屬性就只有以上四個，name文件的合併，壓縮，格式化等等這些處理都有gulp的插件來完成，剛好看了一篇博客，我覺得他已經講得挺詳細的了，夠新手入門了，我在這裡只做一個簡單的例子
css的壓縮
首先要下載gulp-caanano的插件，在命令行輸入npm install gulp-cssnano --save-dev ;然後再gulpfile.js中輸入以下代碼：
var cssnano = require('gulp-cssnano');
gulp.src('.src/demo.css')
.pipe(cssnano()) //壓縮demo.css文件
.pipe(gulp.dest('./src/style/css'))
對src下的demo.css的修改完成並保存後，再在命令行執行任務gulp watch，即可自動化的完成css的壓縮。
最後在記錄一個瀏覽器自動化的例子
下載browser-sync插件，操作同上面相同，npm install browser-sync --save-dev,然後將下麵的代碼複製到gulpfile.js中
// 瀏覽器自動化
var browserSync=require('browser-sync').create();
gulp.task('serve',function(){
browserSync.init({
server:{
baseDir:'./' //以package.json為同一目錄
}
})
})
再執行serve任務，如下圖 地址 http://localhost:3001 是設置自動化的設置， 地址 http://localhost:3000/src/index.html是我的網頁地址，當在不同的瀏覽器同時打開這個網頁，或者在同一瀏覽器不同視窗打開這一個網頁，對其中一個網頁操作（如input的輸入，頁面的滾動），另一個網頁也會進行同樣的操作；對css文件改變後進行保存操作，網頁立刻會做出改變，不用再手動刷新，等等還有其他功能，完成了網頁的自動化，大大的提高了工作效率。
至於其他的插件，我在上面有一個推薦的博客鏈接，講的挺好的了，可以直接的移步哪裡。
