Middleman奇技淫巧大揭密

上一篇我們介紹到了middleman的基礎知識以及slim的安裝，這一篇我們會介紹更多好用的工具，我們先接續上一篇講到的slim：

使用slim作為project預設的template engine

上一篇教到的slim安裝方式其實不能算是很方便，因為安裝過後還必須手動將所有的erb附檔名換成slim，檔案內容也要改成slim的格式，並不是太親民，我們希望一開始產生project時裡面的頁面就全部是以slim的格式呈現的。
幸好middleman-slim這一款gem可以幫我們做到這件事。來，簡單兩步驟：

1. gem install middleman-slim 
2. middleman init PROJECT_NAME --template slim

ok，這樣就搞定了。

懶得按F5沒關係 - LiveReload幫你自動刷新瀏覽器頁面

LiveReload真的可以稱得上是究極懶人功能，目前市面上最有名的是這個：http://livereload.com/，但他是要花錢買的。現在使用middleman讓你不花半毛錢，而且幾乎零設定，一樣是簡單的三步驟：

1. 在Gemfile中加入這行：gem "middleman-livereload"
2. 在config.rb中加入這行：activate :livereload
3. 在終端機輸入：bundle install，重啟伺服器

現在只要在檔案中做了任意修改並存檔後，瀏覽器的頁面就會自動刷新，搭配外接螢幕真的可以說是神兵利器啊～XD

高效率撰寫css - sass＆compass

sass是一種可以被編譯成css的語言，他的出現是為了補足css的諸多限制，例如：無法使用變數、無法進行數學運算、沒有函式。習慣了sass之後，你可以更有效率的撰寫css，只是在寫完以後會需要多一個編譯的動作罷了，但幸好在middleman中，這些事情都會自動幫我們做好。

在開始教學之前，還要在講解一個東西，那就是compass。compass之於sass就好像jquery之於javascript，他提供了許多常用的函式及模組讓我們能更有效率的撰寫sass。

好，那我們就開始安裝sass及compass吧～

1. 在Gemfile中加入這兩行：gem "sass"、gem "compass"
2. bundle install

記得將附檔名.css改成.css.sass，還要注意一下縮排、分號、大括號喔。

用Lorem產生假文字、假日期、假圖片

middleman之所以好用，不只是因為可以整合上面提到的plugin，最大的原因就是他能嵌入ruby程式碼，幫你搞定許多routine work，例如：迴圈產生假的list、產生假文字。

在這裡我們就介紹一下如何使用ruby code來產生迴圈及假資料

Loop：

<% 5.times do%>
    <!-- HTML code -->
<% end %>

假文字：

<%= lorem.words 5 %>

假句子：

<%= lorem.sentence %>

假圖片：

<%= lorem.image("300x400", :background_color=>"333", :color=>"111", :text=>"YEAH") %>

或

<%= lorem.image("300x400", :random_color=>true %>