一，為啥要用構建工具

專案中的js和css屬於靜態檔案，客戶端第一次訪問的時候會快取這些檔案，那就意味著當我們需要改js跟css的時候，即使我們將檔案中的程式碼改了重新發布，那麼客戶端也是看不到，客戶端發現快取中有同樣路徑的檔案，直接讀取。

之前做的專案中，專案上線後客戶開啟一看：“那誰，這裡那裡需要改動一下”。我就操起鍵盤改css樣式，改js業務邏輯，然後一發布，屁顛屁顛的跟客戶講：“大佬，已經改好了，您老再看！”

可當客戶再次開啟頁面的時候，問題還是那個問題。奇了怪了，我本地是好的啊。思前想後才想起瀏覽器快取這麼一說，讓客戶清除瀏覽器快取就好了，但不是很多客戶都喜歡去清除瀏覽器快取，他們只會覺得這樣好麻煩。

那麼怎麼辦？我想很多程式設計師都知道加一個版本號就可以了，這樣瀏覽器就會認為這是一款全新的遊戲。。。。額，錯了，是一個全新的檔案，比如原來是 http://www.xxxx.com/index.js 你現在只需要把地址改為 http://www.xxxx.com/index.js?v=1.0 即可

但是如果這個動作是手動的，那麼很大可能我們將會忘掉去手動敲這個版本號 。那麼這就是為什麼我們需要前端構建工具。前端構建工具有很多，grunt、gulp、webpack等。今天我們只聊gulp。

二、gulp的引入

開啟命令列工具，進入專案所在的根目錄下，輸入 npm init -y 命令，建立package.json檔案。

生成的package.json檔案，專案名稱，版本號，描述資訊均為空，我們用ide開啟後將其填上。

package.json檔案管理我們專案中的包依賴關係，想了解更多package.json資訊，請自行百度。

通過 npm 安裝 gulp 包：

安裝完gulp以及其他要用到的外掛後，packjson.json檔案變更如下：

開始使用gulp：

gulp構建工具的配置資訊預設是寫在gulpfile.js 檔案中，在專案的根目錄下建立 gulpfile.js，通過require引入gulp以及其他外掛

二、gulp的4個核心API

gulp 自身能做的事情不多，主要是通過各種外掛來滿足我們的需求，gulp本身提供了4個非常簡潔的API（很重要，劃重點）, 掌握這4個API你就基本掌握了gulp的全部。

1.gulp.task

定義：gulp.task(name [, deps, fn])

我們給gulp註冊一個任務task，引數name是該任務的名稱，deps是可選項，就是這個任務可能會依賴其他的任務tasks, fn是任務要執行的函式，也就是該任務要幹啥。                                                                                                                                                 

例子中先執行完 task2，task3 ，最後再執行task1任務。task2與task3是並行執行的，不是順序執行。   

2.gulp.src

定義：gulp.src(globs[, options])

與globs 匹配的檔案，可以是string或者一個數組。其引數就是一個我們要處理的檔案是啥！

我們這裡要處理的檔案是 ./src/scripts/ 這個路徑下的js檔案。

3.gulp.dest

定義：gulp.dest( path [, options])

引數path表示檔案處理完後要存放的路徑，option引數一般不用，無需瞭解。

4.gulp.watch

定義：gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

gulp.watch就是監視某路徑下檔案的變化，然後執行指定的任務Tasks或者函式。

這裡gulp監視 ./src/scripts/ 路徑下的所有js檔案是否發生變化，若有則執行 scripts 這一task任務。