前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide，說到前端的工作流程，不外乎就是想要做到自動化，要『省時, 省力, 省麻煩...』，不過以我自己的認知，一個團隊，有人是負責 follow 這些流程的人，當然也有制定流程跟規則的人，不知道為什麼，以最近接觸 Grunt 的程度來說，我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單，以 Grunt 來說，有這麼多 plugin，身為制定自動化流程的人，或許要很熟悉什麼套件做什麼事情，才會更適合某個專案使用。算了，其實我現在也沒到這個等級 ，這邊就不多談了xdd

以下是筆記的部分：
關於自動化工作流程，幾乎網路上的文章，都會提到 Bower, Grunt, Yeoman。

Grunt 與 Bower

• Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
• Bower 需要 node.js 環境以及 npm。
• 安裝: npm install -g bower。
• bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json ， 0.9.0 之後使用 bower.json )
  (這個跟 npm install 時要用的 package.json 很像)。
• 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用，可以重新下指令：bower install 或是使用 bower install packagename --save。
• Grunt，一個可以處自動化工作流程的工具，如同 bower 一樣需要 node.js 環境以及使用 npm。
• Gruntfile.js 通常會放在你的根目錄下。
• 這時候我有點疑惑...，有點分不清楚 Grunt 跟  Bower 的差別，上網找了一下解答 

Grunt 跟 Bower 的不同之處

• 性質：
• Grunt : Task runner
• Bower : Package manager

• 工作內容：
• Grunt : 幫你做一些自動化的任務，方便開發時使用，比方說 壓縮 css/js 等功能。
• Bower :  可管理/部署 JavaScript Libraries 或是第三方套件 (jQuery, spine, Bootstrap...) 。

Grunt 一些常用到的相依性套件
Watch 
grunt-contrib-watch ，這個有 LiveReload 的 support，監視檔案或者資料夾是否有異動，在開發過程中非常有用，我自己也是有在用這個。

jsHint 
grunt-contrib-jshint ，這個我自己沒有在使用，不過簡單介紹一下，jsHint 可以設定你的 JavaScript 的撰寫品質要到什麼程度，提供很多 config 可以設定，對於需要做程式碼 code 品質的團隊也許會挺需要的 :P。

imagemin
grunt-contrib-imagemin ，主要的功能是壓縮圖片，通常結合 watch。

Svg2png
幫你把 SVG 轉成 png， 而且會幫你解決舊瀏覽器相容的問題，Svg2png 我沒有研究，不過感覺起來應該很好用。

modernizer
grunt-modernizr，就是使用 Modernozr 。

sass 
grunt-contrib-sass，編譯 sass/scss。

lsc
編譯 liveScript。

Concat 
Concatenate files。



Grunt 跟 Bower 的出現深深改進了前端的工作流程，減少過去我們一直反覆手動下載第三方 javascript/css 等套件 / 編譯 CSS / 優化圖片等工作，透過 Grunt 跟 Bower 將這些工作自動化，減少開發時間成本。



參考

Automating Front-end Workflow by Addy Osmani
A solid and automated front-end development workflow
My 2012 front-end web development workflow