LiveReload Windows版が落ちまくるので、guard-livereloadでなんとかしてみた話。

LiveReload Windows版を使っていたのですが、ある日を境に起動後30秒もしない間に落ちてしまうという現象に陥りました。alpha版なので致し方ないかなとも思いましたが、代わりにguard-livereloadをインストールし、無事動作に至ったその作業記録です。

ザックリとした手順

  1. DevKitのインストール
  2. gemのアップデート
  3. guardのインストール
  4. wdmのインストール
  5. guard-livereloadのインストール
  6. （yajl-rubyのインストール）
  7. Firefoxにアドオンをインストール
  8. 監視設定と監視開始

インストール

Rubyが既にインストールされている前提で話を進めます。まだインストールしていない場合は、Google先生に聞いてみてください。あと定番の文言ですが、以下の手順は自己責任でお願いします。

ドキュメント

Rubyのライブラリ関連をインストール

ライブラリと言いながら、まずはあとでライブラリをインストールのに必要なDevKitをインストールしておきます。

インストールについては、こちらを参考にしました。

左のダウンロードできるファイルの一覧に「Development Kit」という項目がありますので、それをダウンロードします。

Development Kitをダウンロード

ダウンロードができたら、Cドライブ直下に「devkit」というフォルダを作っておき、その中にダウンロードしたファイルを解凍します。

続けてみんな大好き「黒い画面」ことコマンドプロンプトを立ち上げ、ダウンロードファイルを解凍したフォルダC:\devkitへ移動します。

$ cd C:\devkit

移動後、次のコマンドを実行します。

$ ruby dk.rb init

実行後、インストールされているRubyの一覧が出てきますので、使っているバージョンを選びましょう。

続いて、次のコマンドでインストールします。

$ ruby dk.rb install

DevKitがインストールできたら、ライブラリをインストールする前に、次のコマンドでGemをアップデートしておきます。

$ gem update -system

次のコマンドで、guardをインストールします。

$ gem install guard

続いて、Windows Directory Monitorをインストールします。（ちなみに、これのインストールにDevKitが必要です）

$ gem install wdm

ここでやっとLiveReloadをインストールします。

$ gem install guard-livereload

最後にオプションとなりますが、アドオンとの通信を最適化するために、JSONのパフォーマンスが上がる（らしい）YAJLもインストールしておきます。

$ gem install yajl-ruby

これでひとまずライブラリのインストールは終了です。

Firefoxのセットアップ

私のメインブラウザがFirefoxなので、それ以外は試してませんが、多分大丈夫だと思います。

Firefoxにアドオンを追加しますが、LiveReload.comからリンクされている、ver.2.0.8だとうまく動かないため、2.0.9をインストールします。が、おそらく正式にオリジナルの作者がビルドしたものでなく、StackOverFlowなどに投稿されている修正を2.0.8に施してどなたかがビルドされたものです。（詳細は追えてませんが、ザックリと流れを見た感じ）

監視を開始する

ここから「黒い画面」に戻ります。監視したいフォルダに移動し初期化します。ここでは、C直下にwwwというフォルダを作成し、さらにその中にhtdocsというフォルダを作成、htdocsを監視フォルダにしています。

$ cd C:\www\htdocs  
$ guard init livereload

初期化すると、このフォルダに「guardfile」が生成されるので、そのファイルに監視対象のファイルを書き込みます。すでに記述されてるものに追加しても、それを削除して追記してもOKです。追記する場合は、watchの部分だけになります。

guard 'livereload' do  
watch(/.html?/)  
watch(/.css/)  
watch(/.js/)  
end

以上で準備は整いました。次のコマンドで監視を開始します。

$ guard

きちんと起動すると次のようなメッセージが表示されます。

00:00:00 - INFO - LiveReload 1.6 is waiting for a browser to connect.

この状態で、ブラウザ側のアドオンをクリックすると接続します。

インストールしたアドオンのマークをクリックし、赤い斜線が入った状態にします。

うまく接続ができると、以下のように表示されます。

00:00:00 - INFO - Browser connected.

上のメッセージの後すぐに下記のメッセージが出る場合は、何回かアドオンのオン/オフを繰り返すか、　Firefoxを再起動してみてください。

00:00:00 - INFO - Browser disconnected.

これでguardfileで指定されたファイルを更新すると、ブラウザが自動的にリロードされるようになりました。

「Windowsじゃなくて、Macを使えよ」って話なのですが、いろいろとオトナの事情で、ね…ということで。もっといいやり方があるよとか、ここ違うよとかあれば、@ littlebustersやFacebookページまでご指摘いただけると幸いです。

tags