自上次發表了 Grunt：初次使用及前端建構經驗 後，前端同學 cobish 對筆者說，grunt 不太好用，現在我們項目中已經不用了，現在用 glup。什麼？那你趕緊給筆者我介紹一下。cobish 摳着鼻屎對我說，你去看我的筆記就好啦！好吧，看完後，筆者又整理了一篇關于我們在項目中，使用 glup 的前端文章分享給大家。
在用了 Grunt 的一段時間内，越來越覺得自己離不開建構工具。但是，Grunt 的建構速度讓我有點苦惱，即使是編譯 sass 也需要花上一段時間。于是，我開始試用 gulp，結果意外地讓我驚喜。
下面代碼是使用 gulp 初次來編譯 sass，由于一直都有點習慣了 Grunt 那編譯速度機關為秒級别的速度，剛輸入指令還沒反應過來，就已經以毫秒級的速度編譯完了。
比較一下 Grunt 與 gulp 編譯同一套 sass 代碼下所花費的時間：
并不是說 Grunt 就比 gulp 不好，也有 gulp 辦不到 Grunt 辦得到的事情。但是就運作速度相比，gulp 的速度确實是完勝。
目前我的項目是一個頁面一個 js 入口，比如登入頁面的入口是 login.js，而首頁面的入口是 home.js，它們都是在同一個目錄下。
html 每個頁面的引入是這樣子的：
requirejs 的 config 檔案如下：
接下來就是使用 gulp 對 js 檔案進行打包，用到的是「gulp-requirejs-optimize」，由于項目是多入口檔案，是以需要批量打包，打包的代碼如下：
運作相應指令，即可完成打包：
項目本地後端開發語言是是基于 apache 的 php，域名為 cloud.xxx.com。剛開始想實作浏覽器 F5 自動重新整理使用到的是 grunt 和 livereload 插件，gulp 也有對應的方法，參考 gulp 教程之 gulp-livereload。但是，它需要浏覽器安裝 livereload 插件才能使用，chrome 的插件需要通路外國網站下載下傳，firefox 的插件不起作用，其它的浏覽器也無法實作自動重新整理。
後來，我發現了 Browsersync。簡直就像是找到了寶藏一樣，同樣支援 grunt 和 gulp。以下代碼是使用代理去實作：
運作指令，預設的浏覽器會自動打開 127.0.0.1:3000 連結
如果想多個浏覽器都可以自動重新整理，隻需要打開其它浏覽器，把剛剛的連結輸入即可。還有，由于項目原因，開發的時候不能使用到 127.0.0.1 ，想換成 php 配置的域名怎麼做？直接把 127.0.0.1:3000 連結換成 cloud.xxx.com:3000 即可，Browsersync 實際就是監聽 3000 端口來實作重新整理浏覽器。
之前使用 Grunt 時總結了一篇「基于 Grunt 的前端建構」。在使用了 Grunt 的一段時間後，我發現了 gulp 的運作速度比 Grunt 快很多，于是便從 Grunt 轉移陣地到了 gulp。以下的建構思路跟 Grunt 的建構很類似。如果你也使用過 Grunt，那我相信你一定能夠很快地切換到 gulp。當然如果你沒有接觸過 Grunt，我相信你一定也能夠很快上手 gulp。
參考： 前端 | 重構 gulpfile.js。其中專門建立一個 gulp 目錄用來存放 gulp 代碼，為了能夠将任務更加細化，職責單一，友善日後的維護更新。
$ gulp help # 說明幫助
$ gulp sass # sass 本地編譯
$ gulp jshint # js 文法檢測
$ gulp include # html 包含依賴編譯
$ gulp dev # 開發監控，浏覽器不自動重新整理
$ gulp serve # 開發監控，浏覽器自動重新整理
$ gulp build # 打包上線
開發階段
執行 gulp dev 指令，gulp 會進行一系列建構操作，最後在 dist 目錄下生成可運作檔案，并實時監聽源檔案，一旦源檔案改動會執行相應的操作。
執行 gulp serve 指令，gulp 會執行跟 gulp dev 一樣的操作并監聽源檔案，唯一不同的是它在執行後會監聽某個端口，一旦有檔案改動它會幫你自動重新整理浏覽器，幫你省下了按 F5 的力氣。當然在同時開上多個浏覽器測試頁面時它将會很有幫助。
參考：張雲龍的 大公司裡怎樣開發和部署前端代碼？。通過以下代碼一個大體知道，上線打包主要是對圖檔樣式腳本進行打包處理。是以接下來的工作就是職責分工，獨立完成各自的建構工作。
第一個步驟主要是對圖檔進行處理，包括圖檔合并壓縮 hash 戳等。其中對 css 代碼處理是為了替換合并後的圖檔路徑。
第二個步驟主要是對 css 檔案進行處理，其中還包括替換已經 hash 的圖檔資源，并生成 hash 戳。
第三個步驟是 js 檔案的打包，打包 RequireJs 代碼可以根據依賴進行 js 檔案的合并壓縮，最終每個頁面都打包一個 js 檔案為單入口。
第四個步驟是 html 檔案的打包，替換掉前面已經 hash 的靜态資源即可。
最終生成的代碼依然在 dist 目錄下，也就是說在開發階段與上線打包階段建構生成的代碼都在同一個目錄下，隻不過在開發階段代碼是未進行合并壓縮，上線打包階段代碼是經過合并壓縮打上 hash 戳的。是以建議該目錄下的代碼不需要添加到版本控制中。
開發階段：對 RequireJs 的路徑配置（config.js 與 gulp 中的配置）感到困惑迷糊，多建立一個目錄就路徑不比對打包不成功。
上線打包階段：RequireJS 若添加第三方庫，需要手動修改 gulp 代碼。