前端開發：工具和流程

在dailyreport項目中，我通過springboot + mongodb + redis建構了後端restful接口，現在需要用戶端展現了，但是我的web和移動開發都是初學者，隻能從頭學起。

我再激進一點，我的觀點是：我們不是缺前端工程師，我們是缺優秀的具備匠心的工程師。原文引用了《肖申克的救贖》中的一段話來說明環境對人的限制和塑造，我也放在這裡，提醒我的讀者：不要輕易給自己設限。

我在閱讀上文的時候，文中提到《3周3頁面》這本電子書，于是我在selfstore上買來看了，本文的内容算是我的讀書筆記。我們今天的主題是：當下前端開發的工具以及開發流程。

compass*是一個sass到css的預編譯工具，它還包括一些使用了sass的庫，将很多樣式打包成一些子產品，可以在自己的項目中使用這些子產品。

sass是一個css3的擴充語言，提供了豐富的特性使得編寫樣式更容易（呵呵，css的基礎知識還是得學，設定的曲線平緩一點，慢慢來）。sass提供幾個主要功能來改進css的代碼結構：可嵌套、變量定義、可擴充、可導入和mixin等。

sublime是一個非常好用、非常現代的編輯器，據說是專業的前端都用它（atom默默地瞪了我一眼）。

package control，裝上sublime之後，首先安裝package control這個包管理工具，用于安裝其他的插件。

emmet，是一個快速生成html片段的工具，它支援很多編輯器，包括sublime、textmate、notepad++等。它的用法可以描述如下，寫出表達式<code>section&gt;h2+p*3</code>,光标在末尾的時候單擊tab鍵，就會生成如下html代碼。使用emmet可以極大減少體力活的時間（不過html5的基礎還是要學，再說一次，零基礎的同學不要給自己的學習曲線設得太陡）。

html + css + js prettify，用于格式化html、css以及javascript檔案的插件。在mac上，通過快捷鍵command + shift + h來觸發格式化的動作。

gitgutter，一個用來在sublime增強git效果的插件，可以實時看到目前檔案的修改狀态。

guard是一個指令行工具，可以檢測到本地檔案的修改，并且可以觸發一些指令。例如，當html檔案修改時，我們希望浏覽器能夠自動重新整理，或者當scss檔案修改時，我們希望能夠自動觸發compass進行一次修改。guard的監控規則通過guardfile來定義，例如：

livereload是一個浏覽器插件，它可以跟背景的guard服務通信：當guard檢測到頁面有改動時，則會通知該插件，然後該插件會自動重新整理頁面。

隻要你的機器上安裝了python，就會有一個簡單的http伺服器，啟動指令是：<code>python -m simplehttpserver 9999</code>

啟動兩個終端，一個啟動guard，另一個啟動景台伺服器；然後啟動浏覽器。假設你已經在浏覽器中安裝了livereload，并單擊livereload圖示，那麼在guard背景會出現“browser connected”字樣，就說明guard服務和livereload插件已經建立連接配接了。

<a href="https://www.gitbook.com/book/juntao/3-web-designs-in-3-weeks/details" target="_blank">3周3頁面</a>

<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.mga7dr&amp;id=19492971665" target="_blank">html &amp; css 設計與建構網站</a>

<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.12.mga7dr&amp;id=2253010448" target="_blank">設計中的設計 原研哉</a>