【サクッと実践】gulp-ejsを使ってEJSをコンパイルする方法

しがないWebエンジニア

gulp-ejsの使い方が知りたいぞ。とりあえずサクッと実践してやり方を把握しておきたい。

こんな方向けに、本記事ではサクッと実践できるgulp-ejsの使い方を解説していきます。

普段からgulpをバリバリ使っている方にとっては、EJSのコンパイルもgulpでできればと思うかも。そんな方向けに、今回はnpmパッケージの「gulp-ejs」を使ったコンパイル方法を解説していこうと思います。

というわけで早速やっていきましょう！

gulp-ejsを使ってEJSをコンパイルする方法

gulp-ejsをインストールする

まずは任意のプロジェクトファイルを準備します。準備したコードエディタで開くかターミナルでcdし、下記コマンドを実行します。

bash

npm init -y

これでプロジェクト内にpackage.jsonが追加されました。

続いて、gulp本体とgulp-ejs、それからコンパイルファイルの名前を変えてくれる「gulp-rename」をインストールしていきましょう。

bash

npm i -D gulp gulp-ejs gulp-rename

gulpfile.jsの準備

お次に、gulpfile.jsを用意します。下記コードをまるっとコピペでOK。

gulpfile.js

// gulp本体
const gulp = require('gulp');
// gulp-ejs
const ejs  = require('gulp-ejs');
// gulp-rename
const rename = require('gulp-rename');

function compileHtml() {
  return gulp.src('src/ejs/**/!(_)*.ejs') // 出力先を指定。!(_)はコンポーネントファイル（_header.ejsなど）以外の意味。
  .pipe( ejs( {title: 'gulp-ejs'} ) ) // ejsコンパイル実行 {}内で値を渡すことが可能
  .pipe(rename( { extname: ".html" } )) // コンパイルファイルの拡張子をhtmlに変更
  .pipe( gulp.dest('dist/') ); // 出力先の指定
}

exports.default = gulp.series(compileHtml);

めちゃくちゃ短いですが、動きを掴みたいときはこれでOKかも。。

下準備はこれでOKです。

EJSファイルの準備

プロジェクトファイル内にsrc / ejsディレクトリを作ってその中にejsファイルを置きます。（ディレクトリ構造はご自身の環境に合わせてください。）

適当にindex.ejsを作ってEJS構文でなにか書いてみます。

index.ejs

<!DOCTYPE html>
<html lang="ja"">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <% var hoge = 'hello' %>
</head>
<body>
  <h1><%- title %></h1>
  <p><%- hoge %></p>
</body>
</html>

変数のtitleはgulpfile.jsから渡している値です。（多分あんま使わん）

gulp実行！

bash

gulp default

上記コマンドをターミナルから実行します。

するとdestディレクトリが生成されて、index.htmlが生成されているはずです。htmlファイルの中身は以下の通り。

index.html

<!DOCTYPE html>
<html lang="ja"">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>gulp-ejs</h1>
  <p>hello</p>
</body>

</html>

きちんとコンパイルされました！