ExpressとEJSのライブリロード環境を構築する

先日の記事で「nodemonとBrowserSyncでExpressの快適開発環境を構築する方法」を紹介した。

https://chusotsu-program.com/nodemon-browsersync

この環境にEJSのオートコンパイル機能を導入したので、追加で行った設定をまとめておく。

EJS関連のパッケージをインストール

今回はEJSを使うための「ejs-cli」と、ファイルの更新を監視するための「chokidar-cli」の2つのパッケージをインストールする。

npm i -D ejs-cli chokidar-cli

package.jsonの編集

前回記事で用意したpackage.jsonを以下のように編集する。

"scripts": {
  "start": "npm-run-all --parallel start:*",
  "start:nodemon": "nodemon server.js",
  "start:sync": "browser-sync start --config bs-config.js"

  // 以下を追記
  "start:compileEjs": "ejs-cli -b src/ejs/ \"/**/*.ejs\" -o www/",
  "start:watchEjs": "chokidar \"src/ejs/\" -c \"npm run start:compileEjs\" --initial"
},

追記したコード中「src/ejs」はejsファイルの格納ディレクトリを「www」はコンパイルしたhtmlファイル出力用ディレクトリを指す。

これでnpm startを実行すれば、サーバーが立ち上がりEJSのコンパイルも自動で行い、さらにオートリロードまでまとめてやってくれる。