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を使えよ」って話なのですが、いろいろとオトナの事情で、ね…ということで。もっといいやり方があるよとか、ここ違うよとかあれば、@ littlebustersFacebookページまでご指摘いただけると幸いです。

tags