Sublime Text 2(以下、ST2)に、ファイル保存のたびにブラウザを自動リロードしてくれる LiveReload の導入方法を記しておきます。
ST2 に LiveReload を導入すれば、ファイルを編集保存するたびに、ブラウザのリロードを自動で行ってくれます。もう、ブラウザの更新ボタンやF5キーを押す(連打する)必要がなくなります:D
用意するもの
- Sublime Text 2 *
- SublimeServer (Sublime パッケージ)
- LiveReload for Sublime Text 2 (Sublime パッケージ)
- ブラウザ拡張機能
* 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 を選択、コマンドパレットに「Subli・・・」と入力しているうちに絞り込まれて行くので、SublimeServer を選択してインストールします。
同様の手順で、LiveReload もインストールします。
2つのパッケージがインストールができたら、一度 ST2 を再起動しておきます。
ブラウザに LiveReload 拡張機能をインストール
Chrome か Firefox に LiveReload 拡張機能をインストールします。ここでは、Firefox に LiveReload をインストールしました。
SublimeServer を起動して、ローカルサーバーを起動させる
ST2 を再起動したら、先ほどインストールした SublimeServer を使ってローカルサーバー起動させます。SublimeServer はローカルに HTTP サーバーを立てて、プロジェクト内のファイルをローカルサーバー上で開ける ST2 のパッケージです。
ローカルサーバーを起動させます。
メニューバーの [Tools] – [SublimeServer] – [Start SublimeServer] を選択します。
ブラウザを起動して、アドレスバーに「localhost:8080」と入力し移動します。
すると、プロジェクト内のファイルが一覧されるので、適宜選択してローカルサーバー内でファイルを見ることができます。
ファイルを編集保存する度に、ブラウザが自動でリロードされる LiveReload
ブラウザにインストールした拡張機能 LiveReload をオンにします。
LiveReload が有効になりました。
(* Firefox 拡張機能 LiveReload のボタンがツールバーに表示されていない場合は、メニューバーの表示から ツールバー – カスタマイズ を選択して、「ツールバーのカスタマイズ」ダイアログから LiveReload のボタンを選んでツールバーにドラッグ&ドロップします。)
LiveReload が有効の状態で、ST2 でファイルを編集して保存すると、ブラウザが自動でリロードされるので、煩わしいブラウザの更新ボタンを押す必要がなくなります。
これで制作に開発に集中できますね。