HTML+CSSで静的サイトをつくるとき、ファイルの変更に応じて自動でリロードしてくれるライブリロードをサクッと導入できると便利ですよね。 Node.jsライブラリのLiveReloadXを用いると、これを簡単に実現できます。

この記事では、LiveReloadXの使い方についてまとめます。

LiveReloadXとは

LiveReloadXは、ライブリロードを実現するNode.jsライブラリです。

インストールしてコマンドを実行すると、対象ディレクトリ下を監視するサーバが起動します。 サーバはlivereload.jsを返すのですが、このJavaScriptをHTMLから読み込むことで変更通知を受け、それに応じてブラウザをリロードしてくれます。

ライブリロードの方法

LiveReloadXを実行するには、次の4つの方法があります。

  1. 手動でJavaScriptファイルを埋め込む
  2. ブラウザの拡張機能をインストールする
  3. コマンドライン上でコマンドを実行する
  4. プロキシモードで実行する

この中でも、静的サイトをつくる上では3の方法がシンプルに実行できてよいかなと思います。 以下に、この方法について書いていきます。

使い方

1. インストールする

まず、LiveReloadXをnpmをとおしてインストールします。

$ npm install -g livereloadx

2. livereloadxを起動する

次に、監視対象のディレクトリ上で次のコマンドを実行します。 これにより、LiveReloadXのサーバが起動します。

$ livereloadx -s [-p 35729] [path/to/dir]

オプションで、ポート番号や監視対象のディレクトリを渡すことができます。

3. ページを開く

あとは、ブラウザでページを開けばライブリロードが有効になっています。 上記コマンドを実行したディレクトリや、オプションで渡したパスがpath/to/dirなら、URLとパスの関係は次のようになります。

http://localhost:35729/foo -> path/to/dir/foo/index.html

LiveReloadXのサーバをとおしてページを開くと、livereload.jsが埋め込まれます。 これをとおして自動でリロードが行なわれます。

参考記事

おわりに

簡単な静的サイトの制作で、SCSSなどを使うまでもないケースでも、ライブリロードを導入すると効率的につくれるようになります。 デュアルディスプレイだとさらに捗るので、ぜひ試してみてください。