前端開發：工具和流程

在dailyReport項目中，我通過SpringBoot + Mongodb + Redis構建了后端RESTful接口，現在需要客戶端展現了，但是我的web和移動開發都是初學者，只能從頭學起。

在谷歌上瀏覽資料過程中，偶然遇到ThoughtWorks的這篇文章： 我們真的缺前端工程師么？ 認真讀下來，首先佩服文中作者的學習能力，然后欣賞ThoughtWorks這種以feature為單位的團隊組建方式。文章的核心觀點在于：我們不是缺前端工程師，我們是缺優秀的前端工程師。

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

These walls are kind of funny like that. First you hate them, then you get used to them.Enough time passed, get so you depend on them. That’s institutionalising. 

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

開發工具

1. Compass/Sass

Compass*是一個Sass到Css的預編譯工具，它還包括一些使用了Sass的庫，將很多樣式打包成一些模塊，可以在自己的項目中使用這些模塊。

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

2. Sublime編輯器

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

• Package Control，裝上Sublime之后，首先安裝Package Control這個包管理工具，用于安裝其他的插件。
• Emmet，是一個快速生成HTML片段的工具，它支持很多編輯器，包括Sublime、Textmate、Notepad++等。它的用法可以描述如下，寫出表達式 section>h2+p*3 ,光標在末尾的時候單擊tab鍵，就會生成如下html代碼。使用Emmet可以極大減少體力活的時間（不過HTML5的基礎還是要學，再說一次，零基礎的同學不要給自己的學習曲線設得太陡）。
</ul>

<section>  
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
</section>  




• HTML + CSS + JS Prettify，用于格式化HTML、CSS以及JavaScript文件的插件。在Mac上，通過快捷鍵Command + Shift + H來觸發格式化的動作。

  </li>

• GitGutter，一個用來在Sublime增強Git效果的插件，可以實時看到當前文件的修改狀態。

  </li> </ul>

  3. Guard + LiveReload

  Guard是一個命令行工具，可以檢測到本地文件的修改，并且可以觸發一些命令。例如，當HTML文件修改時，我們希望瀏覽器能夠自動刷新，或者當 scss文件修改時，我們希望能夠自動觸發Compass進行一次修改。Guard的監控規則通過Guardfile來定義，例如：

  guard 'livereload' do
  
    watch('index.html')
    watch(%r{stylesheets/.+.(css)})
    watch(%r{scripts/.+.(js)})
  end
  
  guard: compass  </pre>
  
  LiveReload是一個瀏覽器插件，它可以跟后臺的guard服務通信：當guard檢測到頁面有改動時，則會通知該插件，然后該插件會自動刷新頁面。 
  
  4. 靜態服務器 
  
  只要你的機器上安裝了Python，就會有一個簡單的http服務器，啟動命令是： python -m SimpleHTTPServer 9999 
  
  5. 模板工程 
  
  模板工程的github地址是： web模板工程 ，讀者朋友可以直接使用。 
  
  開發流程 
  
  啟動兩個終端，一個啟動guard，另一個啟動景臺服務器；然后啟動瀏覽器。假設你已經在瀏覽器中安裝了Livereload，并單擊 LiveReload圖標，那么在guard后臺會出現“Browser connected”字樣，就說明guard服務和Livereload插件已經建立連接了。 
  
  參考資料 
  
  
  3周3頁面 
  HTML & CSS 設計與構建網站 
  設計中的設計 原研哉 
                      
  
                          
   本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                          
   轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                          
   本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                          
   
  本文地址：http://www.baiduhome.net/news/view/4b962c                        
                          
   前端