LOG IN

GulpとEJSでテンプレート開発

by oceant

数カ月ぶりにHTML/CSS/JavaScriptのコーディングを行っています。長い間あいてしまうと、過去にやっていたやり方より良い方法が出てきているんじゃないかと思って、ついつい開発環境について調べちゃいますよね。

今回は後ほどCMSに適用するページを作るということで、その枠となる静的なHTMLを数種類用意することになりました。

そんなにページ数が多くないとは言え、ヘッダーやフッターなどの共通部分の管理は1箇所にまとめたいところ。PHPやSSIを使って埋め込んでもいいのですが、今回はJavaScriptのテンプレートエンジンであるEJSを使って管理することに決めました。

開発環境としてはSASSのコンパイルやライブプレビューと合わせて自動的に変換していきたいので、YeomanwebappジェネレーターをベースにEJSを追加することで実現しています。

下準備

必要なプラグインをインストールします。

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

ディレクトリ構成

今回のディレクトリ構成は以下の通り。

/app
+ style/
+ script/
...
+ dev/ ←このディレクトリ内にEJSテンプレートを作成
+ layout/ ←ページの大枠となるテンプレートを配置
| + default.ejs
+ template/ ←コンテンツとなるテンプレートを配置
| + index.ejs
| + hoge /
| + fuga.ejs
+ include/ ←共通部分となるテンプレートを配置
| + header.ejs
+ pages.json ←titleやdescription等のページ情報をまとめたjsonファイル

layoutディレクトリ

ページの大枠を記載するテンプレートを配置するディレクトリです。<! doctype html>から始まり、headタグや共通部分の埋め込みを指示するファイルです。サイト内に1カラムと2カラムのページが混在する場合などに複数のテンプレートを用意することになります。

<!doctype html>
<html lang="">
<head>
<% include ../include/head.ejs %>
</head>
<body>
<% include ../include/header.ejs %>
<%- include('../template/' + path) %>
<% include ../include/footer.ejs %>

<% include ../include/ga.ejs %>
<% include ../include/scripts.ejs %>

<!-- build:js /scripts/main.js -->
<script src="/scripts/main.js"></script>
<!-- endbuild -->

</body>
</html>

templateディレクトリ

トップページや詳細ページなど、コンテンツとなる部分のテンプレートを配置します。CMSにおいてコンテンツとしてページ追加されていく部分です。layoutテンプレートにおいて <%- include('../template/' + path) %>と記載している部分に入ることになります。(pathはpages.json内に記載することになるtemplate内のファイルパスです。)

includeディレクトリ

ヘッダーやフッターなどの共通部分を配置するディレクトリです。こことtemplateディレクトリに作成するEJSファイルは通常のHTML(もしくはEJS)ファイルなので省略します。

pages.jsonファイル

HTMLとして生成するファイルとその中身を指定する設定ファイルです。titleやdescriptionなど、headタグ内等でページごとに変更したいテキストがある場合はこのファイル内に記載します。

{
"pages": {
"index": { ←このkeyがtemplateディレクトリ内のパス・ファイル名となります
"layout": "default", ←大枠となるlayoutの指定
"title": "タイトル" ←テンプレート内に埋め込みたい値
},
"privacy": {
"layout": "default",
"title": "プライバシーポリシー"
},
"hoge/fuga": {
"layout": "default",
"title": "fugaのタイトル"
}
}
}

gulpfile.js

EJSファイルを変更した際に自動コンパイル・ライブプレビューできるよう、gulpfile.jsに記載を追加します。

const fs = require('fs');
const jsonData = 'app/dev/pages.json'; //設定ファイルの読み込み
const json = JSON.parse(fs.readFileSync(jsonData));

gulp.task("ejs", function() {
for (var key in json.pages) {
var data = json.pages[key];
data.path = key;
var layout = data.layout;
gulp.src("app/dev/layout/" + layout + ".ejs") //指定されたlayoutファイルを読み込む
.pipe($.ejs(data))
.pipe($.rename(key + '.html')) //作成されたHTMLファイルをリネーム
.pipe(gulp.dest('app')); //appディレクトリ内に書き出すことでbrowserSyncによるライブプレビューに反映
}
});

gulp.task('serve', ['styles', 'scripts', 'fonts', 'ejs'], () => {
//省略
gulp.watch('app/**/*.ejs', ['ejs']);

});

まとめ

ディレクトリ構成は再考の余地があると思いますが、layoutファイルを切り替えたりコンテンツ毎のHTMLを過不足なく作成できる、共通部分もまとめて管理できるというところで、概ね満足のいく環境を整えることができました。そこそこのページ数となる静的サイト制作においても利用できるんじゃないかと思っています。

pages.jsonがサイトマップ的な役割を果たすので、sitemap.xmlとの連携がとれると開発がもっと楽になりそうです。

※yeomanやgulpを使うことが最新かというと微妙なところだと思うので、そこらへんは突っ込まないでください。


oceant
OTHER SNAPS