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奇技淫巧大揭密
沒有留言:
張貼留言