今回はJavascriptのテンプレートエンジンである「EJS」について、gulpを使った開発環境の構築フローをまとめていきたいと思います。このEJSですが、Javascript内でHTMLや処理などを記述したものを、HTMLファイルとしてコンパイルして利用するのですが、HTMLの中にテンプレートを呼び出すことや条件分岐などが可能になるので、静的ページを大量に制作する場合などにとても役立ちます。   似たようなものにpugなどもありますが、HTMLとの親和性やシンプルさに関しては、EJSの方が勝るのではないでしょうか。EJSはnode.js環境下で使えるので、使用の際にはnode.jsがインストールされている必要があります。node.jsのインストールについては過去記事「Node.jsのバージョン管理をnodebrewで行う」などで紹介しているのでご参考まで。今回はこのEJSを、タスクランナーであるgulpを使った方法で利用します。まずはgulpの環境を準備しておきます。gulpのインストールについては過去記事「Gulp v3系からGulp v4系への移行と注意点いろいろ」などをご参考ください。   以下はgulpがインストールされている前提での流れとなります。まずはnpmなどで必要なモジュールをインストールしていきます。ここで必要になるのは「gulp-ejs」と「gulp-rename」の2つです。gulp-ejsはEJSファイルをコンパイルする時などEJSメインの機能を備えているもので、gulp-renameはEJSファイルをHTMLファイルとして変換する際に必要となります。

$ npm install --save-dev gulp-ejs
$ npm install --save-dev gulp-rename

  2つのモジュールがインストールされると、「package.json」に追記されているのが確認できます。 【package.json】※一部省略

......
"devDependencies": {
 ......
 "gulp-ejs": "^5.0.0",
 "gulp-rename": "^2.0.0",
 ......
}
......

  モジュールがインストールできたら「gulpfile.js」にEJSのタスクを追加していきます。まずは「gulp-ejs」と「gulp-rename」を読み込みます。続けて、gulp.task()でEJSファイルのコンパイル処理を記述していきます。 【gulpfile.js】

const ejs = require("gulp-ejs");
const rename = require("gulp-rename");

gulp.task("ejs", function() {
 return gulp
 .src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"])
 .pipe(ejs())
 .pipe(rename({ extname: ".html" }))
 .pipe(gulp.dest("dist"));
});

// watchでEJSファイル更新を監視する場合
gulp.task("default", function(done) {
 gulp.watch("src/ejs/*.ejs", gulp.task("ejs"));
 done();
});

  対象となるソースファイルの指定には該当するフォルダにあるファイルの拡張子を指定しますが、EJSのファイルは拡張子が「ejs」になるので、それを全て指定します。ただし、モジュールとしてインクルードする場合にはコンパイルしないので、アンダーバーから始まるejsの拡張子がついたものは除外するようにしておきます。   続けて、コンパイルの後はHTMLファイルとしてリネームし、出力先フォルダに生成されるように指定しておきます。watchでファイル更新を監視する場合には、EJSをコンパイルするタスクを引数に登録しておきます。これでタスクの登録は完了です。   上記は以下のフォルダ、ファイル構成を想定しています。ソースファイルであるEJSファイルがdistフォルダ配下にコンパイルされます。

node_modules
gulpfile.js
dist
src
  ┗ ejs
    ┗ test.ejs

  実際に下記のコマンドでEJSファイルをコンパイルしてみます。

$ npx gulp ejs

  すると、以下のようにEJSファイルが指定したフォルダ内へHTMLファイルに変換されて出力されたのが確認できました。

node_modules
gulpfile.js
dist
  ┗ sample.html
src
  ┗ ejs
    ┗ sample.ejs

  出力後のHTMLですが、EJSを使っていると想定しないスペースや空行が入る場合もあります。そんな場合にはGulpで用意されているHTMLの整形ツールのパッケージを導入することで対応できます。HTMLの整形ツールは色々ありますが、今回は「gulp-prettify」というものを使います。下記コマンドでパッケージをインストールしていきます。

$ npm install --save-dev gulp-prettify

  インストールが完了したら、gulpfileに記述しているタスクを修正し、コンパイル時にHTMLの整形がされるように処理を加えていきます。インデントのサイズなども細かく指定できますので、コンパイル後のHTMLを編集する場合にもコードが見やすくて助かりますね。 【gulpfile.js】

const ejs = require("gulp-ejs"); 
const rename = require("gulp-rename"); 
const prettify = require('gulp-prettify');

gulp.task("ejs", function() { 
 return gulp .src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"]) 
  .pipe(ejs( {}, { rmWhitespace: true } )) 
  .pipe(prettify({
   indent_size: 2,
   indent_with_tabs: true
  }))
  .pipe(rename({ extname: ".html" })) 
  .pipe(gulp.dest("dist")); 
});

  また、gulp-ejsのオプションでも余計なスペースを削除するオプションが用意されていますので、合わせて設定しておくといいですね。こちらはejs()の第二引数に指定します。  

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 rename = require('gulp-rename'),
 prettify = require('gulp-prettify'),
 ejs = require('gulp-ejs');

const taskEjs = (done) => {
 src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"])
 .pipe(plumber(
  { errorHandler: notify.onError('Error: <%= error.message %>') }
 ))
 .pipe(prettify({
  indent_size: 2,
  indent_char: ' ',
  indent_with_tabs: false
 }))
 .pipe(rename(
  { extname: '.html' }
 ))
 .pipe(dest('dist'));
 done();
}

// Watch
const taskWatch = (done) => {
 watch('src/ejs/**/*.ejs', taskEjs);
 done();
}

exports.default = taskWatch;

  テンプレートエンジンとしてはマイナーな印象がありますが、HTMLの延長で扱えることで導入コストは低く、シンプルなので手軽に始められるのがメリットですね。静的ページを大量に作成する場合などには威力を発揮するので、開発環境を整えておくと役に立つのではないでしょうか。具体的な使い方などはまた後日改めて記事にまとめていきたいと思います。