LiveReloadの自動更新でサイト制作を2倍にスピードアップ

LiveReload 2

LiveReload

カテゴリ: 開発ツール

価格: ¥850


とっても便利!ファイルを保存すると同時にブラウザをリロードしてくれるアプリです。
利用方法は、作業しているフォルダをアプリに投げ入れて、その時に自動で生成されるJSのコードをHTMLに1行書いておくだけです。

利用の為の準備

LiveReload Drop your site’s folder here.に作業フォルダをドラッグ&ドロップして投げ入れるだけです。
(複数投げ入れる事ができます。)
LiveReload_sample scriptタグが表示されますので、
Insert this snippet before </body> or install browser extensions:
と書いてありますように、</body>タグの直前に入れます。
※install browser extensionsに関しては、Chromeの拡張機能を入れてみましたが、よくわかりませんでした。

scriptタグを設定すれば、あとはテキストエディターで更新して保存をしたタイミング内容が自動で反映されるようになります。

Sassも利用可能

また、Sassに関しては、監視とコンパイルもしてくれます。
output Folderは compassを利用していれば、config.rbの指示に従っているようですが、
Set Output Folder…で個別に変更することもできます。
コンパイルは個別にチェックボックスで選んでの監視も可能なようです。
LiveReload_compass LiveReload sassfolder

SassのコンパイルといえばScoutも便利です

ちなみに、Sassのコンパイルには、Scoutも無料で便利です。
ターミナルでコマンドをうつのもいいですが、こういったツールの良いところは、異なる環境でも同じようにコンパイルされるというところですね。
複数人でSassを作業する場合は利用するのもありかなと思います。
みんなLiveReload 2を買うのがベターな気もしますが、有料だとそうもいかないですから。。

LiveReloadの起動エラー

LiveReloadの起動エラー このようなエラーがでてきたら、ターミナルに

と打ってみてください。

現在portを利用しているアプリが表示されたら、それのアプリを終了させてあげれば起動します。
自分の場合は、SublimeText2がportを利用していました。
SublimeText2をしっかり終了させてから、LiveReloadを起動させて、それからSublimeText2を起動すれば問題なく利用できました。

作業の最後に

作業の最後に、scriptタグを消し忘れないようにしましょう。
入れておいても問題はないと思いますが、不要なタグは削減したほうが何かと吉です。

もっと早く知っておけば、どれだけ楽だったか!オススメです。