90
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LiveReloadが便利すぎる

Last updated at Posted at 2013-02-16

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がブラウザーをリロードしてくれますので実質困りません。

90
91
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?