読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

Sublime Text3の「LiveReload」パッケージを使用する

Sublime Text3のLiveReloadパッケージを使用する

Sublime Text3(以下ST3)ではPackage ControlからLiveReloadをインストールしても使えません。
何故ならそのLiveReloadはST2用のものだからです。

ST3に対応しているLiveReloadはLiveReloadのGithubページから次期バージョンのdev版を手動インストールする必要があります。
そのメモを残しておきます。

因みにMacのST3用のTipsです。
Windowsは...。

とりあえず予めST3を終了させておいてください。

Githubページからdev版をインストールする(ターミナル, Git使用版)

  • ターミナルを開いておきます。
  • LiveReloadのGithubページの中程にある「Installing」の「OSX users」に書かれている文言をコピーします。
  • 一応場所の図と内容を載せておきます。

<code>
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
rm -rf LiveReload
git clone -b devel https://github.com/dz0ny/LiveReload-sublimetext2.git LiveReload
</code>

念の為解説

  • ST3のパッケージフォルダに移動
  • 既に入っているLiveReloadディレクトリを削除(無ければしなくてもおk)
  • LiveReloadのGithubページからパッケージをcloneする

Githubページからdev版をインストールする(Finder使用版)

Gitが入っていない or ターミナルよくわからんって人はこっちがいいかもです。

  • LiveReloadのGithubページの右側にある「Download ZIP」からzipファイルをダウンロードし、解凍しておきます。

  • Finderを開き、command+shift+gで入力ボックスを開く。
  • ~/Library/Application Support/Sublime Text 3/Packages と入力してパッケージディレクトリに移動します。
  • 既にLiveReloadのディレクトリがある場合は削除しておいてください。
  • 1で回頭しておいたLiveReloadのディレクトリをコピペしてください。

ブラウザにLiveReloadの拡張機能をインストールしておく

  • LiveReloadをしたいページを開いて拡張機能を起動します。

STでLiveRealoadを有効化する

ここまで来たらあと少しでLiveReloadが使用できます。

  • コマンドパレットから「LiveReload: Enable/disable plug-ins」を選択します。

  • 「Enable - Simple Reload」を選択します。

これでLiveReloadが使用できるようになるかと思います。
試しに適当なファイルを編集してみてください。

もうファイルを保存→ウィンドウを切り替え→ブラウザを更新→確認、なんて面倒な手順を踏まなくていいですね!

書いてて思ったんですがSTのパッケージじゃなくてGruntとかで良いような。 それならWindowsでも使えるし...。