本週討論「JS 開發過程大絕全都露」相關系列文章，來看看評比結果吧！：）
大概是這週的主題比較龐複，本週只有一篇挑戰文章，
由 vitaminx 發表的「 Grunt.js用在前端開發上」。

http://ithelp.ithome.com.tw/question/10120425

本來大會在評審考量上是有獎項從缺的空間，但經過評選後筆者認為這篇文章對於 Grunt 這個開發工具提供了詳盡的入門指引與個人經驗，另外也能夠確實滿足開發過程大絕（快速即時編譯增加開發功力）的主題，所以決定給獎。:)

過去我們常常在前端 resource 需要倚賴各種不同工具，像是 yui-compressor 等，需要各自設定不同規則，而在現代我們則有新的諸如 coffee/less/sass 等各種 resource 編譯需求。

雖然Grunt 許多人是因為 jQuery 核心採用 grunt 編譯已經聽過他的名字，但可能一直還沒有機會入門，Grunt 可以透過 plugin 跟設定 task 的方式將其一體化的透過命令列、nodejs 環境，將這些操作跨平台的整合在一起，這篇文章是個相當好的介紹。

既然這週文章比較少，藉評審文也提供自身對於所謂開發過程大絕的一些個人經驗：

（從核心專案需求到上層前端技術，前面滿足要優先於後面的）

＠ 首先真要快速開發，明確的需求是首當其衝的

prototype/mock 等資料先行的開發模式是建議的，需求快速變動的情況下，再強的開發大絕都會變成啞彈。

＠ 接下來要講究得是團隊合作的協調性，好的專案編譯工具（ex. grunt ）是不可或缺的。

可以快速節省專案每次開發、過版的時間。最忌諱就是每次過版時都需要倚賴特定人員的專業知識跟龐複 SOP 流程，與其倚賴人一一照步驟去操作十數個步驟不出錯，倒不如讓指令自動化，建立出可信任的過版流程。

＠ 好的版本控制系統(常見選擇有 svn,git,mercurial 等) 也是必要的

如果你的專案還沒有用版本控制系統，那你會需要很大顆的心臟。

＠ 不用花太多時間就可以馬上建立的預設開發環境

根據不同專案環境，一般而言會建立 dev branch 作為開發者進入時，幾乎不用特別設定額外資訊的版本系統，另一方面如果有需要安裝程式，盡可能的調整成一鍵安裝，避免因為複雜的安裝流程折損環境重建或新成員加入的時間。

＠ 好的專案目錄結構

JS/css/image 等靜態 resource 應該有明確的規劃，像是 js 資料夾跟 css 資料夾應該獨自分割成資料夾，最忌諱所有檔案包含 html或 jsp/php 等檔全部混在一起。這樣在編輯或修改時很容易找不到目標檔案，浪費大量的腦力在讓大腦自己跑檔案的 filter ，砍檔案時也容易手誤砍錯出事。

＠ 好的 IDE （整合開發環境）

一般 IDE 比較倚賴 server side 的語言，所以主要開發環境比較難有一致性的推薦，但有一些共同的重點在於：
1.能夠快速的切換至需要檔案
2.syntax highlighter / 文字不會太小太大中文可以正常顯示 / 即時 error report (少打 > 會馬上 feedback)
3.能提供好的 content assistant/word complete 功能

一般而言我們會使用一個主 IDE 跟一個專門用來編輯文字檔的 editor ，主 IDE 用於專案整體開發， editor 則用於臨時需要調整設定檔或是處理一些雜物之類的。

editor 的部份目前 sublime text 非常流行，notepad++ 也是老牌夠用的選項之一，如果你是命令列的玩家，vim 或 emacs 你可能會有興趣。

＠ 明確的頁面流程跟易測試路徑

專案在開發之前盡量要有明確的頁面流程也要考慮到測試需求，這裡說得測試需求並不是叫你寫 unit test （but it's strongly recommended if you could），而是考慮到頁面點擊很辛苦，盡量在設計時不要讓點擊的路徑太久或是留有可以明確用來測試的 url 。

因為每個連結在測試時都可能點上幾十上百次，想辦法讓測試變得容易點不是壞事。
（其實這一步，換句話說其實也是在增進使用者體驗。）

＠ 好的專案程式碼架構

每個專案如何去設計哪些前端程式、哪些前端元件，會根據每個專案不一樣，要根據專案的需要去引用適合的專案工具，通常大家會想聽到的大絕是解決這個階段的問題，但是這個階段其實沒什麼一致性的大絕。

如果你 UI 真的會非常複雜（複雜指的是事件多跟事件處理流程複雜，不是畫面很亂）或是 single page website，採用一個已經有架構的元件系統（ex. extJS ） 會是強力推薦的。

其他 UI 比較不複雜的狀況下：

UI 部份可以採用 Bootstrap 元件作為打底，在上面疊出自己需要的客製頁面。
JS 部份可以採用 RequireJS 或是 asset pipeline (Rails 限定) 協助管理 JS resource，並引入 jQuery 作為頁面操作的核心函式庫。

至於 page script 跟 meta script 的設計技巧，就有機會再另外專章討論，這裡寫不完了，原則上沒有什麼大絕招是通行所有專案的，所以真的是 case-by-case。

對於這個主題大概的分享就到這為止，並且在最後再度恭喜本週的得獎人，
由 vitaminx 發表的「 Grunt.js用在前端開發上」 。
http://ithelp.ithome.com.tw/question/10120425