赫謙小便籤

Middleman + Pow + Livereload + HAML

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

首先要先安裝middleman：gem i middleman

安裝好之後建立Project：

1
2
3

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

在Gemfile中加入：

1

gem 'guard-livereload'

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

Guardfile link
1
2
3
4
5
6
7
8
9
10
11

# 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 的圖示，按下去吧 …

haml, livereload, middleman, notes, pow

Comments