カテゴリー: Node.js

カテゴリー
Node.js

Node.js で EJS

Sass のコンパイルや JavaScript の minify などは、VS Code（私的メインエディタ） の機能拡張に任せて、EJS だけ npm-scripts に監視しさせる開発環境構築メモ。Node.js はインストール済み。

必要パッケージのインストール

  • rimraf: 書き出しディレクトリのクリーン
  • watch: .ejs の変更を監視
  • chokidar-cli: .ejs の変更を監視
  • ejs-cli: .ejs を .html に変換
// npm i -D rimraf watch ejs-cli
npm i -D rimraf chokidar-cli ejs-cli

※読み方が分からないが chokidar-cli の方が watch より 反応が良い気がしたので変更＠200406

ディレクトリ構造

数ページの会社案内のようなサイトを作るとして、dist ディレクトリに何から何まで書き出すと想定。

dist
├ assets // css や js が書き出される
├ summary
│　└ index.html
└ index.hmlt
node_modules
src
├ assets // sass や js を保存（ここは VS Code に任せる）
├ summary
│　└ index.ejs
├ _footer.ejs
├ _header.ejs
└ index.ejs
package.json

npm-scripts

「dist」ディレクトリの .html は必ず .ejs から変換。

// "ejs": "rimraf dist/**/*.html && ejs-cli -b src **/!(_)*.ejs -o dist",
"ejs": "rimraf \"dist/**/*.html\" && ejs-cli -b src \"**/!(_)*.ejs\" -o dist",
// "watch/ejs": "watch \"npm run ejs\" src -p /assets/"
"watch/ejs": "chokidar \"src/**/*.ejs\" -c \"npm run ejs\""

※watch が実行するコマンドは、Windows の場合、ダブルクォーテーションで囲まないとエラーになった。
※watch は、「-p」の後に正規表現で除外を設定するけど、chokidar は監視を絞り込む感じ。
※Mac で rimraf, ejs-cli の対象をダブルクォーテーションで囲まないとエラーになった＠200407

リンク