いろんな人が作ってくれたすごいものに頼り切って生きている気がします。
本日は、普通のHTML, CSS, できればSCSSもホットリロードしたい！という時に役に立つ、
すごいものの組み合わせをご紹介します！
HTMLとCSS(とJavascript)で書いた簡単なページをホットリロードしたい
これがすごく便利です。
私はこの記事を見てインストールしました。
一応ざっくり説明しておくと、node, npmが使える環境で
npm install [-g] [--save-dev] reload
でインストールできます。特にこだわりが無ければ-gつけてグローバルインストールして良いと思います。
あとは、ホットリロードしたいindex.htmlのあるディレクトリで
reload -b
すれば完了です。
ちゃんとした使い方は
ここにあって、たとえば-bオプションはブラウザを開くためのオプションであることとかも書いてます。
今回の使い方は「Using reload as a command line application」のところに載っています。
SCSSを楽にトランスパイルしたい
HTMLとCSSだけ、みたいな簡素な構成なんだけどSCSS使いたくて、お手軽にCSSにトランスパイルしたいとき、
Live Sass Compilerを使うと便利です(Visual Studio Codeを使っている場合)。
Sassという名前ですがSCSSでも大丈夫です。
ちなみに昔から使ってるよ！という方、昔からあった方はdeprecatedらしいので、確認してみてください。
こちらはVSCodeの左の方にあるExtensionsから検索して追加することができます。
検索すると、先述したdeprecatedの方が出てきたりするので注意です！
追加したら、SCSSファイルを開くと下にWatch Sassというボタンが出てくるので、これを押すとファイルの監視が開始されます。
あとはSCSSファイルを書き換えて保存するたび、自動的にCSSに変換してくれます！
Live Sass CompilerでつくったCSS、reloadでホットリロードされない
本日のメインディッシュです。
実は、上記の2つを組み合わせて開発をした場合、SCSSを上書き保存してもホットリロードが走りません。
原因は、reloadの監視対象が html,css,js のみだからです。
この問題を解決するには、ホットリロードを開始するときのコマンドを以下のように変更します。
reload -b -e "html,css,scss,js"
ポイントは、html,...を "" (ダブルクォーテーション)で囲むことです。
囲まないと動かないので注意してください。
コマンドラインを使い慣れているひとなら当たり前なのかもしれませんが、自分はちょっとひっかかったのでメモでした。
-e以外のオプションについても、reloadのREADMEに詳しく載っているので、
確認するともっと便利に使えるかもしれません！
CSSアニメーションの練習したいときとか、ちょっと簡単にホットリロードでSCSS書ける環境があると良いですよね。
どなたかのお役に立てると嬉しいです。