Middleman + Pow + Livereload + HAML

原本今天要教同事怎樣寫HAML & SCSS的,後來覺得HAML還要自己手動轉實在太麻煩,所以就講Middleman + guard-livereload了。

首先要先安裝middleman:gem i middleman

安裝好之後建立Project:

mkdir ~/Documents/playgroud/middleman
cd ~/Documents/playground/middleman
middleman init . --bundler --rack

在Gemfile中加入:

gem 'guard-livereload'

執行bundle install後,透過bundle exec guard init livereload產生Guardfile,然後修改Guardfile

Guardfile link
# More info at https://github.com/guard/guard#readme
# XDite's guardflie: https://gist.github.com/1221542

guard 'livereload' do
  watch(%r{source/.+\.(erb|haml|md)})
  watch(%r{source/helpers/.+\.rb})
  watch(%r{(public/|source/assets).+\.(css|js|html)})
  watch(%r{(source/.+\.css)\.s[ac]ss}) { |m| m[1] }
  watch(%r{(source/.+\.js)\.coffee}) { |m| m[1] }
  watch(%r{config/locales/.+\.yml})
end

修改好後存檔離開,執行 bundle exec guard

安裝powder: gem i powder

如果沒有安裝pow的話就:powder install

然後建立好Link:powder link,這樣應該會建立http://middleman.dev的網址給你使用

安裝瀏覽器外掛(Chrome): https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei

一切就緒後,瀏覽器上應該會出現一個 LR 的圖示,按下去吧 ...

Comments

comments powered by Disqus