Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Gulp 2020.02.12

GulpでJavascriptのテンプレートエンジンEJSの開発環境を構築する

Tags: ,,,,
最終更新日:Update

今回は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の延長で扱えることで導入コストは低く、シンプルなので手軽に始められるのがメリットですね。静的ページを大量に作成する場合などには威力を発揮するので、開発環境を整えておくと役に立つのではないでしょうか。具体的な使い方などはまた後日改めて記事にまとめていきたいと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?