EJS CLIでEJSを自動コンパイルする方法

EJS CLIをコンパイルできるようになった!けど、コンパイルのたびにコマンド打つのはだるいな。gulpを使う以外の方法で自動コンパイルできないか…

本記事では、上記のような疑問を解決します。

前回の記事で、EJSの使い方をまとめました。まだ見ていない方は下記をご覧ください。

【2022年最新版】初心者のためのEJS使い方まとめ

上記の記事でひととおりEJSの使い方を解説しましたが、今回は自動コンパイルのやり方をご紹介していきます。

結論からいうとファイル監視を行ってくれるnpmパッケージ「chokidar-cli」を導入するだけです。笑

そのやり方を今回はご紹介していきます。

EJS CLiからEJSを自動コンパイルする方法

手順はさきほどの記事と全く同じなので、軽く説明します。未読の方は先に記事をご確認いただければ!

【2022年最新版】初心者のためのEJS使い方まとめ

必要ファイルの準備

まずは必要ファイルを準備していきます。プロジェクトファイルを適当に作りましょう。

用意したら、プロジェクト内に移動し、ターミナルで下記を実行します。(vscodeのターミナルから実行すると早いです)

bash
npm init -y

これでプロジェクト内にpackage jsonが生成されます。

EJSファイルを準備

下記構成になるようにファイルを準備します。

project
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です。下記コマンドでインストールしましょう。

bash
npm i -D ejs-cli chokidar-cli

スクリプトを記述する

次にコンパイルを実行するためのコードを書いていきます。package.jsonのscriptsを下記に置き換えましょう。

package.json
  "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コマンド実行後にスクリプトを1回実行するという意味です。

これで準備は整いました。早速下記のコマンドを実行してみましょう。

bash
npm run watch

これで一度コンパイルが実行され、その後は常にsrcディレクトリを監視してくれます。

試しにindex.ejsファイルに変更を加えてみましょう。

index.ejs
  <body>
    <p>hogehoge</p>
  </body>

するとコンパイルが自動実行され、出力先のindex.htmlが変更されるはずです。

【まとめ】Gulpを使わないならchokidar-cliを使ってEJSを自動コンパイルしよう

というわけで今回は以上です。

結論、chokidar-cliを使うだけの簡単な内容となってしまいました。。gulpは、慣れていないと理解するのが大変ですが、chokidar-cliならパッケージをインストールするだけなので楽です。

ぜひぜひ使ってみては!

今回は以上です。

EJS関連記事

【2022年最新版】初心者のためのEJS使い方まとめ

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA