Sublime Text 2におけるLiveReloadの設定


前回Sublime Text 2 を導入してみるにおいてLiveReloadとSFTPの説明は書いたのだけども、使っている内に色々解った事があったので、こちらも個別にメモ。いやしかし、Sublime Text 2は慣れるまでが大変…理想の環境を整えるまでに時間がかかってはあまり意味がないのだけど。

LiveReloadの細かい事

それはもう便利に使わせて頂いております。書いたコードを保存する度にリロードしてくれる訳だから、ブラウザにフォーカスしてF5キーを押す必要がなく、集中してコーディングできる訳ですが。
似た様なパッケージで言えば...

BrowserRefresh

LiveReloadと同じく自動でリロード、またキーバインドも存在するのでショートカットからのリロードも可。しかもブラウザ側の拡張は不必要。しかしながら、ブラウザ側のアクティブなタブを対象にしているので、それこそ検索画面すらリロードしてしまう。完全に集中するならまだしも、調べ物しながらとかには不向きかなと思う。

LiveStyle

http://livestyle.emmet.io/
試してはないのだけど、動画を見る限りChromeの開発者ツールでマークアップしたCSSをそのままSublime Textに適用してくれるみたい。これこそまさにLiveな環境ですな!次はこれをインストールしようかと思う。ChromeだけじゃなくSafariでも可。

で、じゃあLiveReloadは他の二つに負けているかと言うとそうでも無い。

LiveReloadの良い所

  1. 拡張側から目的のタブのみリロードするかどうかを選択できる。
  2. SFTPと連動できるので、アップロードしたファイルをそのまま確認できる。
  3. リロードまでの遅延をミリ秒で設定できる(これ大事)。
  4. もちろんローカルでも動く。

この2と3が重要でして、設定を変えないままだと遅延は100ミリ秒なので、SFTPでアップロードとほぼ同時にリロードされてしまうので、ブラウザ上では更新が反映されない状態になってしまう。アップロード完了までのタイムラグの分(回線によって1000~2000ミリ秒)を設定しておけば、アップロード完了後にリロードされると言う便利な設定です。

注意点

加えてもう一つ設定しておいた方が良いのが、設定からapply_css_liveをfalseにしておく事。この設定の意味(ローカルCSSを適用する?)がよく解っていないのだけど、trueのままだと更新されずconsole.logに「polling!」とか出続ける現象に。危うくChromeの拡張側のjsを変更する所だったが、apply_css_liveをfalseにしたら解決した。
あと、自分の環境ではPCをスリープから復帰したら使えなくなった(再起動したらおk)とか、かくはともあれLiveReload万歳。
Related Posts Plugin for WordPress, Blogger...