Sublime Text:保存するとブラウザを自動で更新、Sass使用でもOK!
Sublime Text便利ですよね。
マークアップ作業中に、
*Sublime Textで書き換え+保存
*ブラウザをアクティブにして、更新
って、何度やっているでしょう。。
ということで、、
Sublime Textの上書き保存とChromeの更新をワンタッチで行う方法
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で楽しく仕事しましょう!