網站製作學習誌

記錄學習製作網站的一切

在 Windows 下使用 LiveReload

LiveReload 是一個很棒的 Web 開發輔助工具，它可以讓我們在修改完 HTML 、 CSS 、 JavaScript 或是圖檔後，立即在瀏覽器上看到成果，而不需要重新整理頁面。

LiveReload 是 Ruby 的一個 gem 套件，使用時必須先安裝好 Ruby 的開發環境。比較常見的 Ruby 開發環境是以 Apple Mac 系統為主，因此網路上大部份的教學也都是用 Mac 系統做示範；但是很多公司目前還是以 Windows 為主要的開發環境，所以本文就簡單為大家介紹如何在 Windows 上使用 LiveReload 。

安裝 Ruby 開發環境

下載安裝程式

在網路上已經有高手幫我們做好 Ruby for Windows 的安裝程式，它稱為 RubyInstaller ，我們只要下載回來安裝即可。

首先我們要下載 RubyInstaller 及 DevKit 兩個壓縮檔。請至 RubyInstaller::Downloads 下載以下兩個檔案：

註：以上的版本可能會變，在下載時請多留意。

安裝 RubyInstaller

將 ruby-1.9.2-p180-i386-mingw32.7z 解開至任何你想安裝 Ruby 的路徑下，這裡我將以 D:\AppServ 為例；然後將解開後的 ruby-1.9.2-p180-i386-mingw32 資料夾，更名為 ruby 即可。

接著在系統環境變數 PATH 前，加入以下路徑：

1

D:\AppServ\ruby\bin;

這樣就能在命令列模式下，自動找到 ruby 或 gem 等的相關執行檔。

註：「修改 Windows 系統環境變數」的方法，請自行上 Google 搜尋。

安裝 DevKit

首先執行自解檔 DevKit-tdm-32-4.5.1-20101214-1400-sfx.exe ，解壓縮的目錄選擇「 D:\AppServ\ruby\devkit 」。

接著開啟命令列模式視窗 (cmd.exe) ，並執行以下指令來產生 config.yml ：

1
2

> cd D:\AppServ\ruby\devkit
> ruby dk.rb init

註：這裡的 > 符號是提示字元，不必輸入。

接下來我們要編輯 D:\AppServ\ruby\devkit\config.yml ，請用記事本開啟該檔案後，在最後面加一行：

1

- D:/AppServ/ruby

註：最前面的 - (dash) 符號也要輸入，它在 YAML 裡是表示陣列元素的意思。

最後在命令列模式下執行以下指令，就可以在 Ruby 裡安裝 DevKit ：

1

> ruby dk.rb install

測試 DevKit

安裝 DevKit 的主要目的是讓 Ruby 開發環境可以編譯出 native 的 gem 套件，因此我們來簡單以 rdiscount 這個套件來測試一下 DevKit 是否安裝成功。

首先在命令列模式下輸入以下指令：

1

> gem install rdiscount --platform=ruby

如果 DevKit 安裝無誤的話，應該會看到以下訊息：

1
2
3
4
5
6

Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed rdiscount-1.6.8
1 gem installed
Installing ri documentation for rdiscount-1.6.8...
Installing RDoc documentation for rdiscount-1.6.8...

接著我們用以下指令來測試看看 rdiscount 是否安裝無誤：

1

> ruby -rubygems -e "require 'rdiscount'; puts RDiscount.new('**Hello RubyInstaller**').to_html"

出現以下訊息就表示安裝成功了：

1

<p><strong>Hello RubyInstaller</strong></p>

安裝 LiveReload

接下來要安裝主角 LiveReload 了。

這裡我按照官方的安裝方法一直失敗，原因就出在於 eventmachine 這個套件無法編譯成功。因此我們要先執行以下指令來取得最新的 beta 版本編譯：

1

> gem install eventmachine --pre

編譯並安裝好 eventmachine 後，就可以執行以下指令來安裝 LiveReload 了：

1

> gem install eventmachine-win32 win32-changenotify win32-event livereload --platform=ruby

安裝 Browser Extension/Add-on

建置好 LiveReload 的環境後，當然還需要瀏覽器配合才行，目前在 Chrome/Firefox/Safari 都已經有對應的套件可以使用了：

請直接以對應的瀏覽器下載安裝即可。

使用 LiveReload

LiveReload 會監控我們網站檔案的變化，然後通知瀏覽器來更新頁面；以下就是 LiveReload 的使用介紹：

啟用 LiveReload 監控

首先在命令列模式下，切換到想監控的網站所在的路徑後，再輸入以下指令：

1

> livereload

這時會出現以下訊息：

1
2
3
4
5
6
7
8

Version:  1.6  (compatible with browser extension versions 1.6.x)
Port:     35729
Watching: D:/Web/wwwroot/sass
  - extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
  - live refreshing disabled for .js: will reload the whole page when .js is changed
  - excluding changes in: */.git/* */.svn/* */.hg/*
  - with a grace period of 0.05 sec after each change
LiveReload is waiting for browser to connect.

這樣就表示 LiveReload 已經開始工作了。

或是我們也可以同時監控多個路徑：

1

> livereload /path/to/dir1 /path/to/dir2 /path/to/dir3

啟用瀏覽器的 LiveReload 功能

接著在瀏覽器打開要測試的網址，例如：

1

http://localhost/livereload-test/

然後啟用 LiveReload 功能，各瀏覽器啟用方法如下：

  • Chrome

    按下工具列的 LR 按鈕即可，按鈕的圖示會變成淺綠色。

  • Safari

    在畫面的滑鼠右鍵選單中，選擇「 Enable LiveReload 」。

  • Firefox

    按下瀏覽器下方狀態列的 LR 圖示即可，這時圖示會變成淺綠色。

如果在 Firefox 啟用 LiveReload 時，跳出以下訊息：

1
2

LiveReload failed to establish connection: WebSocket is disabled.
To turn it on, open about:config and set network.websocket.override-security-block to true.

那麼就在網址列輸入 about:config 來打開 Firefox 的選項設定視窗，並在篩選條件輸入：

1

network.websocket.override-security-block

這樣就會找到 network.websocket.override-security-block 這個設定值，接著雙擊它，讓它的設定值為 true 即可。

啟用瀏覽器的 LiveReload 功能後，應該就會在剛剛的命令列模式下，看到以下 log 資訊：

1
2

Browser connected.
Browser URL: http://localhost/livereload-test/

這樣就表示瀏覽器已經開始執行 LiveReload 的功能；而且我們也可以同時開啟 Chrome 、 Firefox 及 Safari 的 LiveReload ，這樣就可以一次看到三種瀏覽器呈現的效果了。

實例說明

假設現在 LiveReload 監控的路徑為 D:\wwwroot\livereload-test ，在這個資料夾下我們有 index.html 及 css/style.css 這兩個檔案。

index.html

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>LiveReload Test</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="navbar">TODO write content</div>
    </body>
</html>

style.css

1
2
3
4

body {
background: #300;
color: #FFF;
}

請利用編輯器修改 css/style.css 的 body background 值，再看看瀏覽器是否有即時產生變化。而在命令列模式執行的 livereload 指令，同時也會顯示修改了哪些檔案：

1
2

Modified: index.html
Modified: css/style.css

是不是很酷呢？

心得

LiveReload 真的是一個很棒的想法，它節省了很多切換到瀏覽器畫面後重整頁面的時間，讓我們可以真的做到隨打隨看，即時調整網頁呈現的效果。

真的不得不佩服想出這些開發工具的高手們，他們偉大的工作成果造福了我們這些 Web 開發者，也使得我們能有更多時間去處理其他的需求。

不過就像龍哥在讀書會裡說過的：使用了 LiveReload 後，你會發現自己在開發網站時，需要第二顆螢幕了。

Comments