Sublime Text:保存するとブラウザを自動で更新、Sass使用でもOK!

Sublime Text便利ですよね。

マークアップ作業中に、
Sublime Textで書き換え+保存
*ブラウザをアクティブにして、更新
って、何度やっているでしょう。。

ということで、、

Sublime Textの上書き保存とChromeの更新をワンタッチで行う方法

f:id:fushimik:20131010165713j:plain

Browser Reflesh をインストールする

Sublime Textに「Browser Reflesh」というパッケージをインストールします。
パッケージのインストール方法は、下記の記事中に解説がありますのでご覧ください。
じっくり解説!Sublime Text 2 プラグイン 「ColorPicker」 - フロントエンドとかPCとかスマホとか

キーバインディングを設定する

次に上書き保存と同時にブラウザを更新するためのキーバインディングを設定します。
Sublime Textで、Preferences > Key Bindings - User
で、キーバインディングの設定ファイルを開きます。

[
]
の間に下記の記述をします。

macの場合

[control]+[s]にファイルの保存とブラウザの更新を割り当てます。

    {
        "keys": ["ctrl+s"], "command": "browser_refresh", "args": {
        "auto_save": true,
        "delay": 1.5,
        "activate_browser": false,
        "browser_name" : "Google Chrome"
    	}
    }
Windowsの場合

[alt]+[ctrl]+[shift]+[s]にファイルの保存とブラウザの更新を割り当てます。

    {
        "keys": ["alt+shift+ctrl+s"], "command": "browser_refresh", "args": {
        "auto_save": true,
        "delay": 1.5,
        "activate_browser": false,
        "browser_name" : "Google Chrome"
    	}
    }

delay(保存してからブラウザを更新するまでのタイムラグ)を、1.5にしているのは、Sassのコンパイルを待っているからです。
Sassを使っていない方は、ここは、0 でいいと思います。
"activate_browser": false は、ブラウザを更新したときに、フォーカスをブラウザに移さず、Sublime Textに残しておくための設定ですが、Windowsではfalseにしてもフォーカスが移ってしまいます。

キーバインドを設定したら、Sublime Textを再起動します。
ブラウザで、ローカルの対象のページを開いておきます。

macの場合、
[control]+[s]で保存と同時にブラウザが更新されます。
[⌘]+[s]で今まで通りの上書き保存です。

windowsの場合、
[alt]+[ctrl]+[shift]+[s]で保存と同時にブラウザが更新されます。
[ctrl]+[s]で今まで通りの上書き保存です。

簡単に設定できますので、ぜひお試しを!
さあ、Sublime Textで楽しく仕事しましょう!