構建初級前端頁面重構開發環境

本文主要面對前端初級新手，是我從事前端項目外包這一年多時間裏積累的經驗，提供一系列的工具和資料來幫助新手更高效的從事前端開發。可是因爲本人水平有限，因此只能寫一些初級的方法和工具。沒有添加諸如  grunt 這類的更高級的工具，由於我對這塊目前尚未不少實戰經驗。 此外，關於移動端的調試開發，也不多作過，因此本文沒有不少相關信息，有待進一步補充。

原始而傳統的前端頁面重構工做流程

這裏說的是我一開始前端相關工做時的最原始的工做流程，有部分可能你也在經歷，有部分你經歷過去了。 首先拿到設計稿或者是與客戶溝通好設計需求。而後開始新建文件夾，將設計稿放好，新建  index.html、 style.css 等等必要的資源文件。一般先找找以前的項目，複製相似的文件。而後開始按照設計稿寫  HTML 結構和  CSS 代碼，而且在須要圖片的地方，切換到 PhotoShop 去切圖。寫完一次，摁下保存，而後切換到瀏覽器，摁下  F5 或者是  Ctrl+F5 強刷，看到效果是否滿意。若是不滿意，摁下  F12 呼出控制檯，查看對應的 HTML 結構，在調試工具中修改參數值達到設計稿的需求，而後切換回去繼續在編輯器中編寫代碼，反覆到完成爲止。 這個流程主要有一下幾個問題：

1. 每次都要重複的建立初始項目結構和文件，每每複製大量相同代碼。
2. 用很差的編輯器寫 HTML 結構和 CSS 代碼，效率比較低下。
3. 不停地切換瀏覽器、編輯器和 PhotoShop 等窗口，而且調整刷新。
4. 不停地重複上面第三步。

下面就來逐步優化這個工做流程。

擁有一個用來初始化的項目框架

這裏的項目框架，並非指  Bootstrap 這類的，而是一整套項目結構。包括經常使用的  HTML、 CSS、 JS 組件 和一些文件目錄。在一些大公司中，每每會有這一整套打包好的框架，若是有相關項目，執行一條初始化命令，就給你複製下來一份。對於小公司或者我的來講，這類的項目框架就須要本身來總結了。 因此，我共享了一份我本身總結整理出來的項目框架： ysass（實在想不出好名字） 。 ysass 主要基於  Sass 和  sofish 的開源項目  typo。靈感是來自咱們  Deepdevelop 內部的前端框架，可是團隊內部的框架是面向國外網站的，因此我從新整理了一下。 typo 爲中文排版作了不少優化，經驗豐富的  sofish 前輩考慮的也很是全面成熟，因而就拿過來用了。 這個項目框架的使用也很是簡單，你只須要按照下面幾步就能夠：

1. 下載、解壓、將 ysass 命名爲項目名稱，刪掉裏面 README.md 等無用文件。
2. 將設計稿扔進 PSD 文件夾中，觀看 PSD 肯定不須要的組件或功能，在相應文件夾中刪掉無用文件。
3. 打開 style.scss 文件，配置頭部項目信息。
4. 雙擊 convert.bat 文件，開始監聽 SCSS 文件變更並編譯。
5. 打開 index.html ，修改頭部信息，刪掉或增長你的 JS 組件，開始書寫你的語義化的 HTML 結構。
6. 打開 scss\_var.scss 文件，添加項目經常使用變量。
7. 打開 scss\_utils.scss 文件，添加你經常使用的 SCSS 函數。
8. 打開 scss\_custom.scss 文件，編寫項目主要 CSS 代碼。
9. 打開 scss\_media-queries.scss 文件，編寫響應式相關功能。

別告訴我你沒用接觸過 Sass，你難道不知道在 Sass 中直接寫 CSS 也是能夠的麼？再有，有 阮一峯老師那 半天就能夠速成的 Sass 教程，就不會拿出點時間提升一下開發效率？

好工具讓你事半功倍

好的開發工具是必定要學習和使用的，不要禁錮本身的思想，說本身是 XX粉。好久以前我就據說過神器  Sublime Text，可是感受用  NotePad++ 已經足夠了，因而仍然繼續使用  NotePad++，認爲本身是 NPP 粉。後來，又看到一大波  Sublime Text 贊潮，不少大神也在用，因而就拿了半天在網上找了一篇文章照着用了一下。結果今後改用  Sublime Text，由於配合插件，實在是比以前的編碼效率提高 30% 以上。 因此，若是你用的不是  Sublime Text，抓緊來用一下， 或許它不是最適合你的，但它絕對值得你去嘗試一下！ 使用  Sublime Text 除了自己好看以外，還有一個重要的緣由就在於插件多、功能擴展強大。例如：

• Emmet 強大的代碼加強工具，讓你及其優雅的寫那些醜陋的 HTML 嵌套結構，同時能夠本身設置代碼模板。詳情請看以前寫過的入門文章：前端開發神器 Emmet
• Sftp 這是一款能夠用 Sublime Text 直接鏈接遠程 FTP 服務器的插件，輕鬆實如今線編輯，每次保存的時候，都會自動上傳上去，很是方便，還不會用的請看：在 Sublime Text 2 中使用 SFTP 插件快速編輯遠程服務器文件

還有不少插件，好比高亮代碼、代碼補充等等，這些須要你本身搜索，可是上面兩個是前端必備的。 Emmet 幫助你解決醜陋低效 HTML 問題， Sass 幫你提升 CSS 的編碼效率，前兩個問題基本解決了。

用好瀏覽器

瀏覽器的兼容性測試

既然是前端工程師，又是偏向頁面重構的，註定與瀏覽器脫不了干係。須要安裝各類瀏覽器來調試或者作兼容性測試，通常要安裝的瀏覽器和工具以下：

• Chrome 前端工程師必備的開發用的瀏覽器。
• Chrome canary 最新開發版的 Chrome 讓你體驗到最新的 HTML5 等等新功能
• Firefox 必備的開發用的瀏覽器。
• Safari 蘋果瀏覽器，主要用來作兼容性，使用 Mac 電腦的同窗，能夠用這個瀏覽器調試手機上的網頁。不過 Win 平臺上的 Safari 已經中止開發了，在測試的時候，最好使用虛擬機安裝 OS X 系統。
• IE 這個不須要安裝，用 Win 系統的本身帶着。要升級到 IE10 或者 IE11 。
• IETester 用來模擬早期 IE 瀏覽器的渲染模式，來快速檢測頁面兼容性問題。
• 虛擬機，VMware 或者 VirtualBox（推薦） 都是能夠的。

之因此沒有提到 Opera，是由於國內佔有量不多，並且也改用了內核，調試工具也很難有亮點，因此沒有必要再安裝了。常常關注行業內比較有權威的數據參考資料，顯然對你作瀏覽器兼容性有很大幫助，例如： 百度流量研究院(桌面端用戶統計） 和  友盟數據（移動端設備統計）。 通常的兼容性測試要求以下： 1，普通項目或者我的項目，要求 IE8+ 以上兼容性，容許 CSS3 實現的效果優雅降級，總體不錯位便可。 兼容到 IE8 是比較合理和輕鬆的，由於從 IE8 開始，IE 瀏覽器算是基本正常的瀏覽器了，大部分基礎的 W3C 標準都正確實現了，再也不須要想辦法觸發 hasLayout 這類東西來表現正常效果等。並且，IE6 和 IE7 的市場份額也在不斷減小，你那小破網站會有幾個用 IE六、7 訪問的？這裏只須要用 IE10 或 IE11 的開發者工具大致切換一下就 OK 了。 2，要求更加嚴格的兼容性測試，你須要使用 IETester 和虛擬機進行測試。 這點是比較麻煩的，由於 IETester 常常崩潰，有時候根本打不開。而 IE 內置的開發者工具，雖然能夠渲染不一樣版本 IE，但實際上有部分元素被改動過了，因此測試出來的結果，並不必定是真正早期版本瀏覽器的效果。一般來講 IETester 測試的結果要準確一些。 須要注意，瀏覽器在不一樣操做系統中也有一些差別，以前遇到過相關項目，客戶總是反饋在 IE8 上有 BUG，我用 IETester 和 IE10 開發者工具都沒有問題，後來用了 XP 系統的虛擬機一看，果然是有問題。因此，測試兼容性最好的方法，就是用虛擬機安裝各個系統，而後用原生系統+原生瀏覽器來作測試。雖然麻煩，可是在要求很是高的狀況下，會更全面一些，通常要安裝下面幾個虛擬機： 3，至於 Chrome 和 Firefox 的兼容性，通常是沒有問題的，用這些瀏覽器的人也通常比較高端，會常常升級，因此測試最新版就行了。

Chrome 仍是 Firefox？

最初我是 Firefox 粉，特別熱愛 FireBug 這個開發調試插件，可是 Firefox 實在是使人失望，貌似至今沒有解決 Flash 的崩潰問題，打開速度很慢，相比 Chrome 的秒開實在是有必定的差距，特別是安裝不少插件以後更明顯。後來不得已轉用 Chrome 做爲主要調試工具。下面說一下兩款瀏覽器比較好用的插件和技巧。

Firefox

1， Firebug 必備的調試神器，你們都知道，再也不贅述。 2，響應式設計視圖，這是內置在 Firefox Web 開發者工具裏面的一個工具，是我目前用過的 最好的用來調試響應式的工具（沒有之一）。打開右上角  Firefox -> Web 開發者 -> 響應式設計視圖 或者直接摁下  Shift + Ctrl + m。具體效果看下圖： 其餘的插件再也不贅述了。固然，Firefox 也有不少創新的功能，好比在 最新版的 Firefox 29 中，能夠直接在開發者工具裏面在線修改 Sass 或 LESS 的源代碼，這些都證實了它是一款優秀開發者瀏覽器，就是卡的、崩潰的讓人受不了，我用的仍是 SSD 硬盤。

Chrome

Chrome 是當之無愧的最好的前端開發者瀏覽器，雖然界面和交互不如 Firebug，可是功能異常強大並且更新很快，帶來不少創新性的功能。 1，將開發者工具放在側邊，用來快速看到響應式變化效果。不過不要使用這個來調試，由於它的頁面寬度增長了滾動條的寬度，並且分辨率一閃而過，不如 Firefox 的響應式設計視圖更加準確。 2， LiveReload 插件，幫助你無刷新的查看頁面效果。 它須要配合  Sublime Text 來使用，當你安裝好了以後，點擊右上角的圖標，插件就會與  Sublime Text 連接起來，當你在  Sublime Text 中摁下保存，插件就會自動發送刷新指令到 Chrome 中進行刷新，這樣就不須要你再切換到瀏覽器中，刷新瀏覽器了。 點擊查看更多 LiveReload 的說明和幫助。 3， Emmet LiveStyle 插件，幫助你實時看到修改的變化，並且支持將調試工具中變化的值保存到對應文件中。 這絕對是一個很是神奇又強大的工具，出自 Emmet 團隊，須要 Chrome 和 Sublime Text 的支持。相比於上面的 LiveReload 來講，使用這個插件甚至連保存文件都不須要，當你在編輯文件的時候，無需保存，便可實時的在網頁上看到效果。若是你在網頁上用開發者工具修改 CSS 也會同步到對應的文件中。這樣說太抽象了，能夠看下官方的演示視頻： 並且還能夠在線用開發工具修改別人的網站，並把代碼保存下來，還有什麼比這個更碉堡？具體使用信息請看  Emmet LiveStyle 官方文檔，這裏再也不贅述。 Chrome 神奇的開發插件還有不少不少，上面兩個算是對我來講幫助很是大的。雖然看上去  Emmet LiveStyle 更增強大，已經包含了  LiveReload 插件的功能，但實際開發上，須要視狀況配合使用。 Emmet LiveStyle 在開發者工具中調試，會修改到對應的 CSS 文件中，而不會修改 Sass 或者 Less 源文件，這種狀況就須要  LiveReload 插件來實現無刷新了。 這樣，對於有雙屏或者一個23寸及以上的大顯示器的你，根本不須要切換界面以及摁下好多遍保存鍵了。

回顧前端頁面重構的開發流程

介紹完了這些工具和方法，下面再來回顧一下改進版的開發流程：

1. 使用準備好的框架模板作初始化，直接複製過來，觀看並思考 PSD ，抽出可複用模塊，立刻開始寫代碼。
2. 使用 Emmet 和 Sass 等工具，讓編碼效率和質量大幅度提高。
3. 使用 Chrome 的 LiveReload 和 Emmet LiveStyle 插件，配合雙屏或者大屏顯示器，實現無切換無刷新實時看到效果。
4. 對於在線修改，可使用 Sftp 插件直接鏈接 FTP 服務器，或者使用 Emmet LiveStyle 將在線調試好的 CSS 文件直接保存下來，發給客戶覆蓋。

恩，配合多種工具的改進版的開發流程，提高了很多的效率和編碼質量吧？ 原文連接： http://blog.wpjam.com/article/build-frontend-development-environment/