EJSを使ってみる
投稿日:
更新日:
EJSを使う機会があったので、簡単に準備手順をまとめます。
※Node.jsとnpmは入っていることを前提とします。
package.json作成とgulpのインストール
package.jsonを作成
ターミナル
npm init -y
ejs関連のパッケージのインストール
続いて、EJSのコンパイルに必要なnpmのパッケージをインストールします。
インストールするパッケージ
- gulp
→タスクランナー
- gulp-rename
→コンパイル時に拡張子を.ejsから.htmlに変える
- gulp-ejs
→EJSのコンパイル
- gulp-plumber
→エラーが出ても処理を停止しない
- gulp-prettier
→HTMLを整形する
下記のコマンドでまとめてインストールできます。
ターミナル
npm i -D gulp gulp-rename gulp-ejs gulp-notify gulp-plumber gulp-prettier
以下のコマンドを実行してgulpが使える状態か確認してください。
ターミナル
gulp --version
command not found: gulp
と出た場合は以下のコマンドを実行して再度確認してください。
ターミナル
npm i --global gulp-cli
テストファイルを作成する
gulpfile.jsにタスクを書く
下記のコードを貼りつけます。
gulpfile.js
const gulp = require("gulp")
const rename = require("gulp-rename")
const ejs = require("gulp-ejs")
const notify = require('gulp-notify')
const plumber = require('gulp-plumber')
const prettier = require('gulp-prettier')
//ファイル監視
const watchFiles = () => {
watch('./src/ejs/**/*.ejs', series(ejsFunc))
}
const ejsFunc = (cb) => {
return src(['./src/ejs/**/*.ejs', '!' + './src/ejs/**/_*.ejs'])
.pipe(
plumber({
errorHandler: notify.onError('Error: <%= error.message %>'),
}),
)
.pipe(ejs({}, { ext: '.html' }))
.pipe(rename({ extname: '.html' }))
.pipe(
prettier({
printWidth: 150,
semi: true,
singleQuote: true,
trailingComma: 'all',
}),
)
.pipe(dest('./'))
cb()
}
exports.default = series(ejsFunc, watchFiles)
ejsファイルを作成する
index.ejs、_header.ejs、_footer.ejsにコードを書きます。
src/ejs/index.ejs
<% let title = "トップページのタイトル" %>
<% let description = "トップページの説明" %>
<%- include('common/_header', { ttl: title }) %>
<p>ページの本文</p>
<%- include('common/_footer') %>
src/ejs/common/_header.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= ttl %></title>
</head>
<body>
src/ejs/common/_footer.ejs
</body>
</html>
コンパイルしてみる
gulpfile.jsには2つのタスクが書かれています。
1度だけコンパイル
ターミナル
gulp ejs
ファイルを監視してコンパイル
ターミナル
gulp watch
出力されたhtmlを見てみる
前述のgulpfile.jsをそのまま貼り付けた場合、ルートディレクトリ直下にindex.htmlが生成されていると思うので その中身を確認してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トップページのタイトル</title>
</head>
<body>
<p>ページの本文</p>
</body>
</html>
jsonを使用する場合の追加対応
gulpfile.js
const gulp = require("gulp")
const rename = require("gulp-rename")
const ejs = require("gulp-ejs")
const notify = require('gulp-notify')
const plumber = require('gulp-plumber')
const prettier = require('gulp-prettier')
const fs = require('fs')
//ファイル監視
const watchFiles = () => {
watch(['./src/ejs/**/*.{ejs,json}'], series(ejsFunc))
}
const ejsFunc = (cb) => {
const jsonData = JSON.parse(fs.readFileSync('./src/ejs/json/data.json'))
return src(['./src/ejs/**/*.ejs', '!' + './src/ejs/**/_*.ejs'])
.pipe(
plumber({
errorHandler: notify.onError('Error: <%= error.message %>'),
}),
)
.pipe(ejs({ jsonData: jsonData }, { ext: '.html' }))
.pipe(rename({ extname: '.html' }))
.pipe(
prettier({
printWidth: 150,
semi: true,
singleQuote: true,
trailingComma: 'all',
}),
)
.pipe(dest('./'))
cb()
}
exports.default = series(ejsFunc, watchFiles)
src/ejs/json/data.json
{
}
まとめ
HTMLを効率よく書きたいときにEJSや他のテンプレートエンジンを使ってみると良いですね。