Sublime Text 2 に LiveReload を導入する【Windows】

Sublime Text 2(以下、ST2)に、ファイル保存のたびにブラウザを自動リロードしてくれる LiveReload の導入方法を記しておきます。

ST2 に LiveReload を導入すれば、ファイルを編集保存するたびに、ブラウザのリロードを自動で行ってくれます。もう、ブラウザの更新ボタンやF5キーを押す(連打する)必要がなくなります:D

用意するもの

* ST2 にすでに Package Control が入っていることを前提とします。
Package Control インストール方法は下記を参照
Installation – Sublime Package Control – a Sublime Text 2 Package Manager by wbond

ST2 に SublimeServer、LiveReload パッケージをインストール

ST2 を起動して、メニューバーの [Preferences] – [Package Control] を選択。

Package-Control: Install Package

Package Control: Install Package を選択、コマンドパレットに「Subli・・・」と入力しているうちに絞り込まれて行くので、SublimeServer を選択してインストールします。

Command Palette

同様の手順で、LiveReload もインストールします。

2つのパッケージがインストールができたら、一度 ST2 を再起動しておきます。

ブラウザに LiveReload 拡張機能をインストール

Chrome か Firefox に LiveReload 拡張機能をインストールします。ここでは、Firefox に LiveReload をインストールしました。

SublimeServer を起動して、ローカルサーバーを起動させる

ST2 を再起動したら、先ほどインストールした SublimeServer を使ってローカルサーバー起動させます。SublimeServer はローカルに HTTP サーバーを立てて、プロジェクト内のファイルをローカルサーバー上で開ける ST2 のパッケージです。

ローカルサーバーを起動させます。
メニューバーの [Tools] – [SublimeServer] – [Start SublimeServer] を選択します。

start-sublimeserver

ブラウザを起動して、アドレスバーに「localhost:8080」と入力し移動します。

localhost8080

すると、プロジェクト内のファイルが一覧されるので、適宜選択してローカルサーバー内でファイルを見ることができます。

ファイルを編集保存する度に、ブラウザが自動でリロードされる LiveReload

ブラウザにインストールした拡張機能 LiveReload をオンにします。

firefox-livereload

LiveReload が有効になりました。
(* Firefox 拡張機能 LiveReload のボタンがツールバーに表示されていない場合は、メニューバーの表示から ツールバー – カスタマイズ を選択して、「ツールバーのカスタマイズ」ダイアログから LiveReload のボタンを選んでツールバーにドラッグ&ドロップします。)

LiveReload が有効の状態で、ST2 でファイルを編集して保存すると、ブラウザが自動でリロードされるので、煩わしいブラウザの更新ボタンを押す必要がなくなります。

これで制作に開発に集中できますね。