Expressに自動でブラウザ更新する機能を追加してみた件

ファイル更新が完了したタイミングで自動でサーバーが更新されるように設定したいと思います。
npmのパッケージnodemonとbrowser-sync使用し設定を進めていきます。
browser-syncはソースコードの変更を監視し変更があった場合にブラウザをリロード。nodemonはソースを監視して、自動でサーバーを再起動してくれるパッケージです。インストールのコードは以下になります。

npm install nodemon browser-sync

まずはbrowser-syncの設定を行います。以下のコードを実行してください。

npx browser-sync init

bs-config.jsというファイルが作成されます。作成されたファイルに以下の設定を追加します。

"files": [ "**/*.js", "**/*.css", "**/*.html", "**/*.ejs" ],
"proxy": "http://localhost:3000",
"port": 4000

次にbrowser-syncとnodemonのコマンドをpackage.jsonにタスクとして設定していきます。package.jsonのscriptsに以下のコードを登録します。

"start:nodemon": "nodemon app.js",
"start:sync": "browser-sync start --config bs-config.js"

登録したタスクを実行します。
タスクの実行のためにnpm-run-allというパッケージをインストールします。

npm install npm-run-all

package.jsonのscriptsに以下のコードを追加します。

"start": "npm-run-all --parallel start:*",

最後にnpm run startコマンドで実行するとブラウザが立ち上がりejsやapp.jsファイルの更新に合わせて自動でリロードや更新が走るようになりました。