Middleman快速入手

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

why middleman？

當然是因為他~~好吃好看又好玩~~：

可以內嵌partial頁面
可以導入haml、slim加快layout速度
可以導入sass加快寫css的效率及管理
可以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中使用這個簡潔的撰寫方法勒？只要簡單三步驟：

在Gemfile中加入gem "slim"
在config.rb中加入require "slim"
在終端機輸入：bundle install

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

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

2013年6月1日星期六