サイト制作に超便利。自動リロードしてくれる LiveReload (for Mac) を入れてみた

livereload00

開発ツールが最近マイブームの方に、 「これ入れた方がいいっすよ。」と言われ、やっと入れてみたのでご報告。 ファイルを更新したら、自動でブラウザをリロードしてくれるアプリです。今まで、ブラウザに移動してCommand + R を押すというのを何回したか分かりませんが、これからは永久に押さなくてよくなりそうです。

1. まず Mac App Store で LiveReload を買おう。

私が買ったときは850円でした。

livereload01

2. アプリを立ち上げよう

立ち上げると下の画面が出てきます。

livereload02

ここの点線四角のところに、リロードさせたいファイルがあるフォルダを投げ込みます。
自動リロードさせるファイルを認識させる方法は、
・出てきたコードを貼付ける方法と
・ブラウザの拡張機能を使う方法
がありますが、コードを貼付ける方は、たくさんファイルがあると大変だし、消し忘れると嫌なので、ブラウザの拡張機能を入れた方がいいです。

3. ブラウザに拡張機能を入れる

私はいつもChromeを使っているので、Chromeの拡張機能を入れました。
Chromeのスタート画面から、Store へ。

livereload03

LiveReload で検索して、Chromeに追加します。

livereload04

4. 拡張機能のセッティング

ツールから拡張機能のページに行って、LiveReload のところで、
URLへのアクセスを許可にチェックを入れときます。

livereload05

5. 自動リロードしてみる

自動リロードさせたいファイルをブラウザで表示して、ブラウザのツールバーに出た LiveReload のアイコンをクリックします。

livereload06

こんな風にアイコンの中の丸が黒くなれば起動している状態です。
起動後、ローカルのファイルを更新して保存すれば、自動でブラウザも更新されます。

Note:

私は最初うまく動作してくれませんでした。調べた結果、SublimeTextを使っていたからで、それを一旦落として、もう一度 LiveReload を立ち上げたら動いてくれました。

参考にしたサイト:
とっても便利!LiveReloadの自動更新でサイト制作を2倍にスピードアップ!

入れた後は癖で Cmmand+R を押すこともあったけど、すぐまったく押さなくなりました。慣れって怖いですねー、これがない時がすごくめんどうに感じます。
これを作った人たちありがとう。