2013年6月1日 星期六

Middleman快速入手

之前就時常聽到Middleman這個東東,但是一直沒有機會去試他,因為其實自己在刻html上還沒遇到什麼太大的產能問題。今天為了教設計師怎麼迅速產生靜態網站,自己便下海來學了一下。

why middleman?

當然是因為他好吃好看又好玩
  1. 可以內嵌partial頁面
  2. 可以導入haml、slim加快layout速度
  3. 可以導入sass加快寫css的效率及管理
  4. 可以livereload,瀏覽器即時更新目前頁面


How to start?

首先,你得安裝ruby環境及gem,這部份不贅述。
安裝好ruby環境後,一行指令輕鬆安裝:
gem install middleman

好了,這樣就裝好了,接著我們來介紹三個實用指令:
  • middleman init [project_name]
  • middleman server 
  • middleman build


產生middleman project - middleman init


很簡單,在你要產生project的路徑下打這段指令即可:
middleman init [project_name]

這時middleman會幫你產生一些檔案:
source(資料夾)、
config.rb、
Gemfile、
Gemfile.lock、
.gitignore

我們主要要修改的html,css,javascript等檔案,都在source這個資料夾裡面。


啟動伺服器 - middleman server 


如果還要先安裝apache那也太累了,一樣在專案資料夾底下一行指令:
middleman server

輕鬆啟動你的服務~預設是跑在localhost:4567上


輸出你的專案 - middleman build


一樣在專案資料夾底下一行指令:
middleman build

就會在專案資料夾中產生build資料夾,裡面就是輸出後的靜態頁面了。
看到這裡你可能會很好奇,為什麼我還要多跑這道手續呢?
因為在middleman裡我們預設是使用erb來寫html,雖然跟html幾乎一模一樣,但是我們還是會多少使用到一些嵌程式碼或局部頁面的功能,而這樣的東西還是要經過compile成一般的html檔案,瀏覽器才看得懂。如果你是用sass來寫css,在這個步驟也會同時將scss檔轉成css檔案。


安裝其他套件讓你的專案建立更快速


在middleman中管理套件的方式跟rails是一樣的,只需要把需要安裝的gem加到Gemfile中即可,安裝時只要打這個指令:
bundle install

拿slim這個套件做舉例好了,slim是個跟haml和jade有著異曲同工之妙的html簡化工具,能讓你用更加簡潔的方式撰寫html,例如原本要寫:
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    
    <title>Welcome to Middleman</title>
    
  </head>
  
  <body class="index">
    <div class="welcome">
      <h1>Middleman is Watching</h1>
      <p class="doc">
        <a href="http://middlemanapp.com/">Read Online Documentation</a>
      </p><!-- .doc -->
    </div><!-- .welcome -->
  </body>
</html>

但用slim的話只要這樣寫就夠了,有夠簡單:
| <!doctype html>
html
  head
    meta charset="utf-8"
      title Welcome to Middleman
  body.index
    .welcome
      h1 Middleman is Watching
      p.doc
        a href="http://middlemanapp.com/"
      /! .doc
    /! .welcome

那要怎樣在middleman中使用這個簡潔的撰寫方法勒?只要簡單三步驟:

  1. 在Gemfile中加入gem "slim"
  2. 在config.rb中加入require "slim"
  3. 在終端機輸入:bundle install


OK,接著你就可以開始體驗這種簡潔快速的撰寫方式了!

更多關於middleman的奇技淫巧請看下一篇:Middleman奇技淫巧大揭密

沒有留言:

張貼留言