HTML
JavaScript
liveReload

LiveReloadが便利すぎる

More than 5 years have passed since last update.

LiveReloadというツールがとても便利。

一言で言うと、ファイルの変更を監視して、変更があったらブラウザーをリロードしてくれる、ものです。

Web系の開発やっているとブラウザーのリロードは年中やってます。

だけど、これをしなくていいというのがこんなにも幸せなこととは知りませんでした。

LiveReloadの使い方は簡単です。


  1. LiveReloadを起動する

  2. 開発中のプロジェクトのフォルダを監視対象に追加する

  3. 開発中のプロジェクトにコードスニペットを忍ばす(あるいはブラウザーエクステンションをインストールする)

こうすると、監視対象のファイルが更新された時にブラウザーがリロードされるようになります。

2の監視対象の追加は、ディレクトリをドラッグアンドドロップすれば巻単位追加できます。

3のスニペットはLiveReloadの画面に表示されているものをコピペするだけです。

次のようなスニペットです。

<script>

document.write(
'<script src="http://' +
(location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' +
'script>'
)
</script>

ブラウザーエクステンションを使うのではなく、コードスニペットを使った場合は、

別なマシンから接続していても自動的にリロードがかかります。

別なマシンは、iPadでもiPhoneでもAndroidでも大丈夫です。

対象のサイトを表示しているすべてのブラウザーが同時にリロードされます。

テストの効率が上がること請け合いです。

ただね、Sencha Touchのプロジェクトで使っていて、SASSのコンパイルも有効(Compassも有効)にしているとCompassのコンパイルがうまく動かないようで、エラーを吐きます。

それの直し方がいまはちょっとわかりません。

わかる方、教えてください。

結局、いまは、compass watchを動かしておいて、LiveReloadはSASSコンパイルをオフにして使っています。

そうすれば、compass watchが動いてコンパイルしてくれ、それが終わったらLiveReloadがブラウザーをリロードしてくれますので実質困りません。