好きなものだけ詰め込んで、
好きなところへ
- Gadget Camera Camp Leather -

ウェブデザイン!超使えるSublimeText3でLiveStyleとLiveReloadをインストールする

   

Style cssSublimeText3という超使いやすいエディタ知ってますか。便利なんですよ。
名前の感じからしておしゃれそうでもあるでしょ?だから愛用しています。けっこう。
でも、最近までその真髄に気がついていませんでした。

CSSに書いたことがそのままサイトに反映される!

これすごくないですか?CSSに書いたものを保存してブラウザーをリロードする手間が省けちゃうんです。いちいちいままで手動でやってきた人はその便利さに震撼するはず。
僕はこれを知ってからデザインのチョチョイとした変更がすごい楽になりました。

SublimeText3の導入の仕方。パッケージコントローラーのインストールの仕方などは知っているものとしてお話を進めていきます。

LiveStyleのインストール

こちらはCSSが随時ブラウザの方に反映されるプラグイン。

UntitledパッケージコントールでLiveStyleと検索してインストール。

Emmet LiveStyle Chrome ウェブストアそのあとは拡張ストアに行って。こちらをChromeにインストール。

使い方は簡単で。CSSと編集サイトを開いた後、右上のボタンから拡張機能をONにします。その後、ボタンの中の設定で開いているCSSファイルを選択するだけです。
あとは変更点が即座に反映されます。めっちゃ便利くさい。

LiveReloadのインストール

こちらは保存した後に即座にブラウザのリロードボタンを押してくれるプラグイン。ウェブデザインにおける必須動作をちょちょっと自動でやってくれるだけでこんなにもストレスから解放されるなんて思っていませんでした。

LiveReload Chrome ウェブストア先にChrome拡張ストアでこちらをインストールしておきます。

さて、SublimeText3側の方ですが、少々面倒くさいです。

こちらにいってその説明通りに進みます。

ターミナルを使います

の前に、Githubアカウントを持っていない人は取っておきましょう。

黒い画面怖い。
これを一文ずつコピーしてターミナルに貼り付け、その後エンターを押す、を最後まで繰り返します。

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

うまくいくと以下のような画面が出てきます。

Packages xcodebuild ◂ sudo 80×24なんかXcodeの認証が古いとかなんとか。
パスワードを入力して、スペースを押しまくったら、、agreeという文字を入力してエンターを押します。

その後はGithubのユーザ名をパスを入力すれば勝手に終わります。

それが怖い人は手動で

黒い画面恐怖症の人や、アカウント持っていない症候群の人はこちらの方法で。

Grafikart ST3 LiveReload GitHubさっきのサイトの右上にあるDownloadZIPを押します。

ダウンロード と PackagesそれをSublimeText3のパッケージフォルダにぶっ込みます。

あとはローカルのファイルに

<script>document.write('<script src="http://' + (location.host || '${1:localhost}').split(':')&#91;0&#93; + ':${2:35729}/livereload.js?snipver=1"></' + 'script>')</script>

をぶっこめばいいそうです。

もう元には戻れない使いやすさ

一回これやっちゃうと、今までなんであんなめんどいことやってたんだろうって気分になってくる。帰れません。

SNSのフォローもぜひよろしくお願いします!
ー 著者:ひょさか ー
ここまで読んでいただきありがとうございます。
是非、下記のSNSをフォローの上、最新記事の更新通知を見逃さないようにしていただけたら幸いです。
Twitter(@Nu0hH)←おすすめ
Instagram(@garretcafe)
YouTube(@GarretCafe)