→ Rplus:用連結記得不要用) 改用> 不然pcman會判斷錯連結 09/11 19:10
→ evenwu:是喔？... 這是markdown直接貼上的... orz 09/11 22:49
→ evenwu:如果點連結有問題那就看原文好了 謝謝 09/11 22:50
原始出處
http://rgba.tw/post/10074630322/middleman-intro
---
http://middlemanapp.com/
這是筆者用過最快速的 html mockup 工具，筆者曾在一天之內使用 middleman
完成一個網頁設計案。雖然他很威，但是有點門檻... 門檻如下：
- 自認是**網頁設計師**
- 懂一點點 [ruby](http://www.ruby-lang.org/zh_TW/) 語言
- 很熟 HTML
- 很熟 CSS，甚至 [Sass](http://sass-lang.com)，
或更威的 [Compass](http://compass-style.org)
如果以上幾點對你都不是問題，那就可跳來用 middleman 做網頁設計。
---
## Middleman 有著以下的優點：
- 內建 [haml](http://haml-lang.com/)，使用 haml 來做 html layout
減少巢狀錯誤，這是 middleman 內建的 templating languages 之一。
- 可使用 partial，輕鬆把網頁的頭、尾、側欄局部拆開，
並且可選擇性的套用在每一頁。
- 可以使用 [compass](http://compass-style.org) 這套暴力的 css 撰寫法，
有多暴力？可參考之前 RGBA 的文章
[[1]](http://rgba.tw/post/5962811043/scss-compass)
[[2]](http://rgba.tw/post/6208134168/css-rgba-compass)。
- 內建 livereload，可以讓你一邊修改原始碼、瀏覽器自動 reload 的功能。
以上是對設計網頁有助益的項目，除此之外，完成設計之後還可以直接
- 交付給 ruby 或 [rails](http://rubyonrails.org/) 工程師直接套程式
- 直接佈署到免費的 hosting — [heroku](http://www.heroku.com/) 給你的客戶看看
---
## 安裝 middleman
整個學習過程裡，最困難莫過於安裝環境，因此筆者特地把安裝過程筆記起來。
ruby 版本建議使用 ruby 1.8.7 ree，筆者使用 1.9 有遇到問題。
如果你有用 rvm，可以直接下指令安裝 ree
rvm install ree
安裝好 ree 之後就可以來安裝 middleman
gem install middleman
---
## 使用 middleman 建立專案
開啟一個新專案時，必須使用指令：
middleman init new_project_name
new_project_name 是你專案的名稱，但如果你要讓他成為一個 rack app
（例如想用 [pow](http://pow.cx/) 跑起來）就得加上 `--rack` ；
如果你還想讓 middleman 專案佈署到 heroku 或其他伺服器，
就必須再加上 `--bundler` ，整個指令如下：
middleman init new_project_name --rack --bundler
如此便可順利的建出一個專案資料夾，裡面含各種必要的檔案。
---
## 使用 middleman
使用 middleman 反而是整個學習過程中最無痛的部份，因為他真的很簡單。
建議參考官方網站的說明，建議先看下面三項就好：
- [Templates, Layouts & Partials]
(http://middlemanapp.com/guides/templates-layouts-partials)
- [Sass and Compass](http://middlemanapp.com/guides/sass-and-compass)
- [LiveReload](http://middlemanapp.com/guides/livereload)
這邊就不多做說明。
---
## 把 middleman 佈署到 [heroku](http://www.heroku.com/)
筆者嘗試把 middleman 直接佈署到 heroku 上面遭遇到很多挫折，
這邊也特別筆記下來...
首先 gemfile 必須要加入這一行
gem "therubyracer-heroku", "~>0.8.0"
然後記得
bundle install
下完之後，記得用 `git` 把專案 commit 起來。再使用 heroku 開一個 app，
而開這個 app 的時候也要注意，不能只使用 `heroku create` 要使用
heroku create --stack bamboo-ree-1.8.7
這樣你的 heroku app 環境才會是跟 ree 相符的，萬一你已經下過 heroku create，
那就必須下個切換 stack 的指令
heroku stack:migrate bamboo-ree-1.8.7
並且重新 `git push heroku master` 才會完成佈署，
如此一來你辛苦做的專案就可以給任何人看了！而且完全免費！
--
關於 RGBA 網路設計師聚會
http://rgba.tw/about
每星期三 19:30 – 22:00
台北市捷運行天宮站三號出口，法奇曼第咖啡
等你來討論
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.100.58