OVERFLOW: AUTO;

Aiming to be modern, practical skilled front-end engineer.

素の HTML の開発環境でホットリロードできるようにする

何か動作を確認したかったり、ちょっとしたコーディングを行いたいときがあります。

モダンフレームワークを使っていればやってくれるのであえて行う必要はないですが、素の HTML ファイルを書いてるときにもブラウザでホットリロードしてほしいです。

VSCode の拡張機能を追加するのもひとつの方法ですが、コマンドひとつで立ち上げるプラグインがあるのでご紹介です。

NPM のプラグイン「reload」を使う

www.npmjs.com

Automatically refresh and reload your code in your browser when your code changes. No browser plugins required.

書いてあるとおりにインストールすればもう使えます。

// インストール
$ npm install -g reload

// 対象のファイルのあるディレクトリに移動
// reload を起動
$ reload -b

すると勝手にブラウザが立ち上がって localhost にアクセスしてくれます。

Reload web server:
listening on port 8080
monitoring dir /Users/立ち上がっているファイルのディレクトリ

停止するときは Mac だと Control + C を押すだけです。

地味に便利!