単なるHTML/CSSだけのプロジェクトでもホットリロードする方法

こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい！って時ありますよね。

そんな時に簡単にホットリロードを行う方法です。

結論

1.「reload」パッケージをインストールする。

npm install -g --save-dev reload

2. プロジェクトのディレクトリで、以下のコマンドを実行する。

reload -b

解説

npmパッケージにreloadというものがあります。それを使いましょう。

reload

Node.js module to refresh and reload your code in your browser when your code changes. No browser plugins required.. Lat...

www.npmjs.com

インストールすることでreloadコマンドが使えるようになります。オプションの-bをつけることで自動でブラウザをオープンします。

relaod -b

このパッケージは2年ほど前に登場したようです。僕がコーディングを始めた頃には無かったので、便利になりましたね。

もしnpmでグローバルにインストールしたくない場合はnpxで一時的に実行してください。

npx reload -b

ホットリロードが効かない場合

このreloadは、デフォルトではHTML/CSS/JSファイルのみを監視対象にしています。Sassを使っているなど、HTML/CSS/JS以外のファイルを使っている場合に効かない可能性があります。

SassはCSSファイルにコンパイルしてから使うはずなので、そのタイミングでCSSが更新されreloadが行われるはずですが念のため覚えておいてください。

オプションで監視対象のファイル形式を指定しましょう。-eオプションが利用できます。

reload -b -e "html,css,scss,js"

これで大抵の場合は解決できそうです。