JGulp: 利用Gulp 配置的前端項目自動化工做流

商業競爭時代的Web 開發，效率愈來愈成爲其中決勝的關鍵因素之一。在前幾年的時候，前端是一片荒蕪的待開墾之地，開發者更多考慮開闊更多技術疆域；而最近幾年，在前端技術這種更新迭代快到連裸奔都追不上的狀況下，在強調高產的同時，效率必然是成爲爭奪的制高點。

引子

在苦苦構思了上面的開頭後，從「效率」這個詞Jeff 引出了今天話題——也就是標題說的前端項目自動化工做流。也許你還不全懂諸如「前端自動化」「工做流（workflow）」這些名詞，不急且讓我列舉下面的場景：

在剛剛過去的時代（恩對於不少人來講是他們正在經歷的時代），小J 同窗是這樣開發靜態網頁的：接到項目，新建命名一個項目文件夾，依次新建images、css、js等文件夾分別放對應的靜態文件，新建index.html 開始碼HTML+CSS+JS 代碼，改動一下按一下F5(或CTRL+R)刷新瀏覽器。項目大致快完成了，去tinypng 壓縮圖片，去某個在線壓縮網站壓縮合並CSS/JS文件，最後檢查一番整理文件打包供後續開發。後來有了Github 作版本控制，後來用了Compass 寫Sass 貌似快了些。不過不過，依然在完成一次項目後累成狗的同時祈禱鍵盤F5鍵沒有壞掉。

前進

不得不說老外不管在哪一個領域都領先咱們幾步，前端亦是如此。在早早就通過了那個年代後，老外發明（或者說整合）了一種前端自動化的方式，藉助Node 這個新時代框架構建了一套工做流工具，目的是將上面說的壓縮合並、新建、刷新等重複性工做讓「機器」自動完成——工程師嘛就去幹該乾的事情，作愛作的事，專一編碼。

那麼到如今，這類工具備什麼？據我淺陋的網絡認知，Grunt 很流行，聽說很著名的前端工具Yeoman 包含了這個Grunt 。因而在某個風平浪靜的下午，我去入門Grunt，可是看到那複雜的配置我就慫了——暈追求效率的工具也不用弄那麼複雜吧，做爲工具自己應該是簡單+其做用並舉的吧？而後偶然看到一篇《Gulp的目標是取代Grunt》的檄文，看完後俺義無反顧投入了Gulp 的懷抱。在花了一個小時多瞭解了Gulp 並看明白配置的寫法後，那個風平浪靜的下午，我久久不能抑制住心裏的激動。藉着這激動的情緒以及對舊時代經歷的種種憤懣，我搗鼓了出了屬於個人Gulp——JGulp。雖然是造輪子，但依然相見恨晚。

JGulp

JGulp 是本人利用Gulp 配置的適合本身的一個前端項目自動化工做流，目前正在實踐運用中（通俗說用得還挺爽）。若是你有須要，能夠參考本工做量構建適合本身的工做流。

Github地址在這，跪求Star，歡迎Fork！

JGulp 包含的功能模塊（插件）

小標題含義：功能（對應的Gulp 插件）

Compass（gulp-compass）

一個Sass 框架，本工做流主要是Compass + Sass，所以熟悉這二者是使用本工做流的基礎條件。

Sass（gulp-sass）

Sass 是與 Less 並舉的 CSS 預處理器，一種全新的CSS 編碼方式。

本地Web 服務器功能（gulp-webserver + tiny-lr）

可以讓你的當前項目目錄映射到Localhost 上，本功能主要是爲了添加自動刷新（livereload）功能而添加。

網頁自動刷新功能（gulp-livereload）

這個功能毫無疑問是最實用的，藉助本livereload 模塊，一旦監控到有文件改動就自動刷新頁面。須要安裝相應的Chrome 擴展配合使用。

JS 文件合併（gulp-concat）

JS 文件壓縮（gulp-uglify）

圖片無損壓縮1（gulp-imagemin + imagemin-pngquant）

通過實際使用發現，圖片壓縮略有損失，但基本無礙。

圖片無損壓縮2：Tinypng 形式（gulp-tinypng）

借用tinypng 的官方API 進行壓縮，支持png、jpg 格式，後續經過 gulp build2 命令便可自動調用。由於服務器在國外緣由，有時候會很慢。

文件清理功能（gulp-clean）

在項目完成能夠刪除一些多餘的文件

任務錯誤中斷自動重傳（gulp-plumber）

好吧，「任務錯誤中斷自動重傳」是我瞎命名的。默認的 Gulp 任務在執行過程當中若是出錯會報錯並當即中止當前工做流（如在 watch Sass編譯時候恰巧 Sass代碼寫錯了）。使用plumber 模塊能夠在糾正錯誤後繼續執行任務。

自動打包並按時間重命名（gulp-zip）

通常項目完成後須要整理文件並壓縮以供交付使用或進行下一階段的開發，本模塊能夠實現將項目文件自動打包並按時間重命名。

自動上傳文件到遠程FTP 服務器（gulp-sftp）

完成開發後，可經過本命令自動上傳文件到遠程FTP 服務器，以供在線調試

其餘（gulp-copy、gulp-rename、opn）

其餘雜項模塊爲該Gulp 添加文件複製、文件重命名、瀏覽器自動打開項目目錄等基礎功能

注：
1.由於CSS 代碼主要是經過Compass 框架完成，因此本工做流不涉及CSS 壓縮等其餘功能模塊（由於這些功能Compass 自己已經包含）。
2.後續屢次用於實戰項目後可能會有增減，即不斷完善之以讓我的前端工做效率最大化。

使用方法

1. 請先確保已經安裝Gulp(須要 Node.js 環境) ，建議採用下面的代碼全局安裝

   $ npm install --global gulp

2. 進入你的項目文件夾下clone 本 git 項目

   $ git clone https://github.com/Jeff2Ma/JGulp.git

   clone 後建議刪除殘留的.git 緩存文件夾，方便添加本身的Git 版本信息管理：

   $ rm -rf .git

3. 按照我的的項目需求，重命名JGulp 文件夾爲你本身的項目英文名稱，填寫Project.md文件（Project.md文件在項目最終打包的時候會自動重命名爲README.md保存在build 文件夾），填寫package.json 文件的項目名稱部分。若是須要進一步的個性化，能夠編輯gulpfile.js 文件。

4. 進行相關配置（若是有須要用到相關功能）：爲了安全，將重要的配置信息保存到項目目錄下的一個json 文件中，名爲 config.json，該文件示例代碼以下：

   {
       "project" : "Gulp",     
       "localserver" : {
           "host" : "localhost",
           "port" : "8081"
       },
       "tinypngapi": "Tinypng API KEY",
       "sftp" : {
           "host" : "8.8.8.8",
           "user" : "username",
           "port" : "22",
           "key" : "~/.ssh/sdfsfdsf",
           "remotePath" :"/"
       }
   }

   相關內容（項目別名、本地服務器域名+端口、Tinypng API KEY、ftp相關信息）請自行配置，爲保證安全，config.json文件已經添加到.gitignore文件中。

5. 而後捏，就基本上能夠的了，默認任務：

   $ gulp

6. 若是項目已經完成，能夠經過build 命令進行項目相關文件收集，項目文件最終會聚集到項目目錄下的build 文件夾中方面進一步操做

   $ gulp build

   若是須要調用Tinypng 的圖片壓縮，那麼命令需改成：

   $ gulp build2

7. 打包build 文件夾下的項目文件，會自動生成項目別名-xxxx.zip 的文件（xxxx 爲打包時候的時間）供交付使用或進行下一階段的開發

   $ gulp zip

8. 若是要上傳到遠程服務器進行線上調試，能夠經過該命令自動上傳（需提早在 config.json作好配置 ）：

   $ gulp upload

---

原文連接：http://devework.com/jgulp.html