Hatena::ブログ(Diary)

shouhの日記

2015-09-30

livereloadx を使ってHTML ファイルをブラウザ上で自動リロードする in Windows7

livereloadx というツールを知った。HTML ファイルをブラウザ上で自動リロードできるらしいので、試してみた。

動作確認環境

インストール

基本的には配布元ブログの手順に従うだけだけど、
http://tech.nitoyon.com/ja/blog/2013/02/27/livereloadx/
いくつかハマったポイントがあったので、備忘録がてら改めてまとめてみる。

まずは livereloadx を動かすのに必要な node.jsインストールする。公式サイトからインストーラを DL して起動するだけでいけるはず。

インストール完了後、環境変数がいじられているので、既に使用中のコマンドプロンプト再起動して(新たに立ち上げてもいいけど)おく。ちなみにプログラムランチャ等からコマンドプロンプトを立ち上げている場合、そのプログラムランチャ含めて再起動が必要なので注意。(環境変数を反映するには起動元から起動し直さないといけない)。この辺よくわからないなら Windows 再起動が確実。

インストールが成功したなら以下のようにバージョン番号が出るはず。

$ npm --version
2.11.3

続いて liverealodx をインストールする。ネットワークインストールなので、プロキシを使ってる環境ならその設定がいる(一行目)。使ってないなら不要。

$ npm config set proxy http://(PROXY-IP):(PORT)
$ npm install -g livereloadx

配布元ブログによるとこれだけでインストール完了らしいが、実はまだダメ。もう一つ、LiveReload をインストールする必要がある。http://feedback.livereload.com/knowledgebase/articles/67441-how-do-i-start-using-livereload を開き「Download an alpha version」をダウンロードし、インストールする。

あー、あともうひとつ。Firefox から自動リロードさせるためのプラグインも入れないといけない。 http://livereload.com/extensions/ より Firefox extension 2.1.0 をインストールする。インストール後、メニューバー右クリック > カスタマイズ > にて「LR」というアイコンツールバーD&Dしておく。

livereloadx を使ってみる

まずは自動リロード対象を指定する。LiveReloadを実行し、「+add」ボタンにて、自動リロードしたいHTMLファイルがあるフォルダを追加する。追加後、LiveReloadは閉じてもよい。

続いて、自動リロードを有効にする。コマンドプロンプトを開き、上記HTMLファイルがあるフォルダ(下記例では d:\work\sphinx\sphinx_introduction\_build\html)に cd した後、livereloadx を実行する。以下のように、ずらずらと出力が出てくるはず(その際livereloadxは終了されないので応答は返ってきません)。

$ cd d:\work\sphinx\sphinx_introduction\_build\html
$ livereloadx
2015-09-30 16:02:01 - info:  Config:
2015-09-30 16:02:01 - info:    - mode:   default
2015-09-30 16:02:01 - info:    - port:   35729
2015-09-30 16:02:01 - info:    - filter:
2015-09-30 16:02:01 - info:      1: exclude ".{git,svn}/"
2015-09-30 16:02:01 - info:      2: include "*/"
2015-09-30 16:02:01 - info:      3: include "*.{html,shtml,tmpl,xml,css,js,json,jpeg,jpg,gif,png,ico,cgi,php,py,pl,pm,rb}"
2015-09-30 16:02:01 - info:      4: exclude "*"
2015-09-30 16:02:02 - info:  Waiting on port 35729...
2015-09-30 16:02:02 - info:  Watching "d:\work\sphinx\sphinx_introduction\_build\html"...

この時、Windowsファイアウォールの設定許可画面が出るだろうが適当に対処する(私はドメインネットワークにしておいた。意味はわかってないけど)。

あとは、Firefox側で自動リロードを受け付けるようにするだけ。上記HTMLファイルがあるフォルダ内のHTMLファイルをFirefoxで開き、LRボタンを押して有効化する。この時、LRボタンのアイコンに赤い線が入るはず(有効になったことを示す)。

これで完了。HTMLファイルが更新されたタイミングで、自動的にFirefox側も更新されるはず。