こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい！って時ありますよね。
そんな時に簡単にホットリロードを行う方法です。
結論
1.「reload」パッケージをインストールする。
npm install -g --save-dev reload2. プロジェクトのディレクトリで、以下のコマンドを実行する。
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"これで大抵の場合は解決できそうです。
コメント