WEBアザラシ

デジハリという海で泳ぐアザラシのブログ

LiveReloadが最強すぎて初心者のうちに使いたかったって話。


どーも、あざら氏です。

「WEBフロントエンドエンジニアです( ー`дー´)キリッ」と
語るにはまだまだ技術力が足りないので、
ジョブチェンするためにsassをやり出しました。

最初は色んなweb上のドキュメントを見ていたんですが
書店で見つけたsassの教科書が神だったので買っちゃいましたw

book.scss.jp

このWEB製作者のための◯◯の教科書シリーズは
説明が丁寧で神です。本当に。他にはCSS設計やベクターデータ、
ちなみにお気に入りはGithubの教科書で今度、買おうと思っていますw

まあ、sassについては後日ゆっくりと語るとして
このsassの教科書に載っていたLiveReloadというプラグインについて
熱く語りたいと思いますww

しかし、例のごとくスクショ取って分かりやすくなんて
そんな親切なブログではありませんwww
読者の皆様にドS、想像力を育んで頂きたいというモットーで書いてますのでw

ということで参考のサイトはこちら。

blog.sou-lab.com

使い方
・ソフトをダウンロード
・ブラウザのプラグインをダウンロード
・ソフトで監視対象を補足
・保存→自動更新
といった流れだとご理解頂ければ。
因みにクロームだとプラグインの設定を若干いじります。

まず、ソフトをダウンロードします。

How do I start using LiveReload? – LiveReload Help & Support

Download the latest version (v2.3.66)から無料でダウンロード出来ます。
(今更ですがこのブログにはwin版の対応とか書きませんw全てmacの操作ですw
)

一応、Mac AppStoreでも有料版があるらしいですね。
しかしバージョンはフリー版の方が進んでる…
ベータ版扱いなんですかね??しかし、1000円でも余裕で購入できるレベル。

LiveReload

LiveReload

  • Andrey Tarantsov
  • Developer Tools
  • $9.99

 
次にブラウザに合ったプラグインをダウンロードします。

How do I install and use the browser extensions?


僕はChrome民なのでこちらのChromeウェブストアから。

chrome.google.com

 

Chromeはエクステンションインストール後に「ツール>拡張機能」から
「ファイルのURLへのアクセスを許可する」にチェックが必要です。  

と、言うことですのでChromeユーザーは気を付けるべしですね。

ってことで、環境構築は完了です。


あとはソフトを起動し、監視対象のファイルをブチ込み
ブラウザのプラグインをONにして保存するのみ。
圧倒的に簡単ですね。

sassだとコンパイルされた後に自動反映される感じでしょうか?

以前、実はEmmet LiveStyleを使っていたのですが
使用を止めてしまったんですよね…
理由としてはST2との噛み合わせが悪いのか
バグってバグってワンワンワワーンですよ。

今回のLiveReloadはファイルから読み込むタイプなので
保存後、Reloadという処理になり、かなり安定した挙動です。
今のところ良い感じなので今後もゴリゴリ使っていきます!!

以上です!