個人切圖方法最佳實踐

這是個人原創文章，原文地址：http://lpgray.me/article/47/

一個一般的前端開發工做，基本都是這樣一個流程：

1. 從產品和設計手中取得設計稿

2. 寫靜態頁面與前端交互，也就是俗稱的切圖

3. 編寫前端的JS交互特效

4. 將靜態頁面交給後端人員套模板（最近還流行先後端分離，套模板也交給前端來搞，前端除了處理頁面以外，還負責http請求層的開發，後端只負責數據接口開發，無論展示，但這個模式目前普及度還不高，所以我們不討論這個）

5. 聯調模板，寫ajax交互

還有比較流行的Webapp開發模式，開發、構建所有依賴框架，諸如angularjs、avalon之類的框架就不屬於這次討論的範圍。我們此次就說切圖。

過去的模式分析

咱們前端在作靜態頁面時，常常面對的一個問題就是會有大量重複html代碼，好比公共頭部、公共頁尾部分在每一個頁面都會包含，並且有的時候須要使用靜態頁面驗證需求，在這種要求下，頁面間的跳轉也須要你本身寫href，此時，若是你負責的項目比較大，頁面比較多時，維護起來你會很是痛苦。固然，更可怕的還有巨多的css文件，js文件也須要有條理的維護。

過去的總結

其實，對過去的前端開發模式總結一下，就是前端的模板不夠「動態」。若是有一個辦法可讓咱們像後端套模板似的來去作前端靜態頁面，那前端確定能夠很好的去規劃不一樣的業務模塊，那麼CSS/JS文件怎麼去組織管理的問題，固然也迎刃而解啦。

個人切圖方法介紹

爲了解決html巨多，css、js很差管理的狀況，我引入了相似後端開發套模板的include機制，將公共頁面部分提取出來，好比：header（整站公共導航）、footer（整站頁尾）、styles（樣式表）、scripts（腳本），而後在每個頁面中include公共頁面，這樣就很好維護了。

乾貨來啦！我將我整個的開發流程總結了一個grunt項目初始模板，你們能夠在個人github上下載：https://github.com/lpgray/ray-grunt-template

使用 grunt-includes

gruntjs想必搞前端的同窗都很熟悉，這個我就很少介紹。我是使用的一個grunt插件，名字叫grunt-includes，這個插件能夠將帶有include的html頁面轉換成常規的html頁面。

開發方式

個人切圖方式大體以下：

1. 使用 livereload + watch 插件實現監控代碼改變瀏覽器自動刷新

2. 使用Less來組織css

3. JavaScript仍是按常規模式來寫（至於你想用coffee或者用commonjs來寫，這都隨便啦）

4. 使用watch + includes來實現監控html改變，而後自動調用grunt-includes功能

5. 讓livereload的http server訪問grunt-includes轉化後的頁面
   至此，你已經能夠實現一個功能強大，相似後端動態include的前端切圖模式！

代碼構建

若是須要前端交付壓縮後的css和js，你也可使用process-html來進行css、js的引用替換，讓html頁面都包含壓縮後的代碼。

以上這一套開發流程我github上的項目都已經包含了，你們有興趣能夠本身搞下來體會體會。

提供一些額外的參考資料

如何使用gruntjs初始化模板