Rails Gem LiveReload使用

LiveReload是一個對webDevelop非常好用的gem啊
LiveReload的功能就是,在IDE編輯完code然後ctrl+s儲存之後
會自動地幫你reload網頁,不用再改完code之後還要移滑鼠去點瀏覽器然後重整網頁
非常方便,另一個我自己覺得好用的地方是因為他是一儲存就自動reload,所以就變成了
一個即時debug的東西,尤其現在剛學rails很常會犯syntax錯誤,所以打完一段就save
就可以順便看看自己有沒有犯了syntax錯誤或是其他的bug,不用等到打完一大串才發現bug然後在茫茫的大海裡找錯誤
自己是用atom,所以下面就以atom為範例記錄一下在使用方法

1.先檢查一下atom有沒有安裝Dev Live Rload
到atom的工具列找到packages,在裡面如果有看到Dev Live Rload就代表有安裝了
應該是一開始安裝atom的時候他就自己有安裝的,如果真的沒有安裝的話就到
preferences -> install -> installed packages 輸入livereload找到之後安裝
已經有安裝的人也可以在這邊看到livereload現在是啟用還是停用的

2.安裝browser extensions,這邊需要在瀏覽器上面裝一個外掛去跟atom做連線
我是用chrome所以就去chrome web store安裝,另外他也有支援safari跟firefox
詳細請看這邊
How do I install and use the browser extensions?
用chrome的人可以直接點下面的網址安裝
LiceReload browser extensions
安裝完成之後到chrome的設定->擴充功能裡找到LiveReload,然後把允許存取檔案網址打勾,並且可以在網址得地方看到一個圓圈然後中間有的空心的圓圈的icon

3.在rails專案裡安裝guard-livereload gem,網址在下面
(https://github.com/guard/guard-livereload)

步驟一:先到Gemfile加上下面這一段,把guard-livereload加在development裡

group :development do
  gem 'guard-livereload', '~> 2.5', require: false
end

步驟二:安裝
在終端機上或是iterm上輸入 bundle install,安裝好gm之後接下來就是要在專案裡裝上livereload,
接下來在iterm再輸入guard init livereload初始化他,輸入之後會在專案的根目錄底下產生一個
叫做Guardfile的檔案然後把它打開。

步驟三:修改Guardfile
打開Guardfile之後會看到裡面有一段是這樣的

guard 'livereload' do
  extensions = {
    ....
  }

在這個extensions我們再來加上他給我們的Options,把上面那一串換成下面這一串

guard 'livereload' do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser

    notify: true,          # default false

    host: '127.0.0.1',     # default '0.0.0.0'

    port: '3000',         # default '35729'

    apply_css_live: true, # default true

    override_url: true,   # default false

    grace_period: 0.5 ,    # default 0 (seconds)

    js_template: './my_livereload.js.erb' # default is livereload.js.erb from gem

  }

最主要的地方是把host跟prot改成rails sever預設的網址,這邊要注意的是如果是自己從他們github複製過來的或是自己key的不要忘記每個選項後面的,(逗號),沒有加的話等等執行livereload就會出現一堆錯誤訊息,修改完之後儲存就好

步驟四:執行livereload
我們先用scaffold開一個簡單的專案出來,然後在iterm開兩個tab或是兩個視窗一個用來跑rails s另一個用來跑livereload
不要忘記要記得進去專案的資料夾,然後先在其中一個視窗打rails s把 rails server建立起來,然後再到另一個視窗輸入guard啟用livereload,啟用了之後應該會顯示LiveReload is waiting for a browser to connect.
然後去網址列找到剛剛有提到的那個空心圓的icon,去點他一下啟用這個外掛讓他變實心的圓圈像下圖這樣

然後可以去iterm執行livereload的那個視窗看有沒有出現

01:37:49 - INFO - Guard is now watching at '/Users/kuro/rails_projects/liveReloadDemo'
[1] guard(main)> 01:37:50 - INFO - Browser connected.

有的話就代表連線成功了,之後就隨便開一個view出來去修改裡面的內容,然後按ctrl+s儲存,看儲存之後網頁會不會自動reload,livereload還可以設定要監看哪個檔案或資料夾,不過我也沒研究這麼深有興趣的人可以試試看

參考資料:
Railsメモ(28) : Guard::LiveReloadでView変更時にブラウザを自動リロードする

guard/guard-livereload

Railsの開発効率を上げる - guard-livereloadを使ってRailsでブラウザのオートリロードをさせる

guard-livereloadを使う

comments powered by Disqus