EJS CLIをコンパイルできるようになった！けど、コンパイルのたびにコマンド打つのはだるいな。gulpを使う以外の方法で自動コンパイルできないか…
本記事では、上記のような疑問を解決します。
前回の記事で、EJSの使い方をまとめました。まだ見ていない方は下記をご覧ください。
【2022年最新版】初心者のためのEJS使い方まとめ
上記の記事でひととおりEJSの使い方を解説しましたが、今回は自動コンパイルのやり方をご紹介していきます。
結論からいうとファイル監視を行ってくれるnpmパッケージ「chokidar-cli」を導入するだけです。笑
そのやり方を今回はご紹介していきます。
目次
EJS CLiからEJSを自動コンパイルする方法
手順はさきほどの記事と全く同じなので、軽く説明します。未読の方は先に記事をご確認いただければ！
【2022年最新版】初心者のためのEJS使い方まとめ
必要ファイルの準備
まずは必要ファイルを準備していきます。プロジェクトファイルを適当に作りましょう。
用意したら、プロジェクト内に移動し、ターミナルで下記を実行します。（vscodeのターミナルから実行すると早いです）
npm init -yこれでプロジェクト内にpackage jsonが生成されます。
EJSファイルを準備
下記構成になるようにファイルを準備します。
ejs-practice（プロジェクト名）
L ejs
L index.ejs
L _header.ejs
L _footer.ejs
L package-json
L package-lock.json
L node_modules必要パッケージのインストール
今回必要になるのは、ejs-cliとchikidar-cliです。下記コマンドでインストールしましょう。
npm i -D ejs-cli chokidar-cliスクリプトを記述する
次にコンパイルを実行するためのコードを書いていきます。package.jsonのscriptsを下記に置き換えましょう。
"scripts": {
"ejs": "ejs-cli --base-dir ejs/ 'index.ejs' --out dest/",
"watch": "chokidar \"ejs/\" -c \"npm run ejs\" --initial"
},ejsのスクリプトについては前回解説しているので、省略させていただきます。（こちらから見れます。）
watchで追加しているのが、chokidar-cliのコマンドです。スクリプトの意味は下記です。
chokidar \” 監視対象のファイル \” -c \” 監視対象ファイルが変更したあとに実行するコマンド \” –initial
-cは–commandの略、–initialはwatchコマンド実行後にスクリプトを１回実行するという意味です。
これで準備は整いました。早速下記のコマンドを実行してみましょう。
npm run watchこれで一度コンパイルが実行され、その後は常にsrcディレクトリを監視してくれます。
試しにindex.ejsファイルに変更を加えてみましょう。
<body>
<p>hogehoge</p>
</body>するとコンパイルが自動実行され、出力先のindex.htmlが変更されるはずです。
【まとめ】Gulpを使わないならchokidar-cliを使ってEJSを自動コンパイルしよう
というわけで今回は以上です。
結論、chokidar-cliを使うだけの簡単な内容となってしまいました。。gulpは、慣れていないと理解するのが大変ですが、chokidar-cliならパッケージをインストールするだけなので楽です。
ぜひぜひ使ってみては！
今回は以上です。
EJS関連記事
【2022年最新版】初心者のためのEJS使い方まとめ