①.ejsのテンプレートを作成 ⇒ template.ejs
②CMSからJSON形式データを出力 ⇒ data.json
③gulpfile.jsにタスク作成、HTMLページを自動作成
⇒ template.ejs ＋ data.json ＝ page.html
2.詳細
やりたかったこと
- ヘッダーやフッターなどをインクルード。
- 同一のテンプレートからページを大量生成。
- gulpのプラグインとして動作させる。
- なるべく学習コストを低く。
上記要件に合うものとして、テンプレートエンジンがよさそうでした。有名なやは高性能そう且つ実績がありますが、学習/導入コストが高そう。
ひとまず上記に挙げた機能があり、できればgulpで動作するものがよかったので、サンプルコードを見たかんじ簡単そうなEJSを選びました。
gulp-ejsをインストール
npmでプラグインが配布されています。
インストールは以下のコマンド。ページ生成のためにgulp-renameというプラグインも併用します。
npm install gulp-ejsnpm install gulp-renameJSON形式でページデータを制作する
htmlを生成する際のページの内容は、JSONで記述してテンプレートに渡します。
data.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
{
"pages": [
{
"id": "page1",
"title": "ページ1",
"photos": [
{"photo":"1.jpg"},
{"photo":"2.jpg"},
{"photo":"3.jpg"}
]
},
{
"id": "page2",
"title": "ページ2",
"photos": [
{"photo":"4.jpg"},
{"photo":"5.jpg"},
{"photo":"6.jpg"}
]
},
{
"id": "page3",
"title": "ページ3",
"photos": [
{"photo":"7.jpg"},
{"photo":"8.jpg"},
{"photo":"9.jpg"}
]
}
]
}
|
gulpfile.jsにタスクを記述
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
var fs = require('fs');//JSONファイルをパースするのにnode.jsのfsモジュールが必要
var gulp = require('gulp');
var ejs = require("gulp-ejs");
var rename = require('gulp-rename');
//ejsのサンプル jsonからファイル生成
gulp.task('ejs', function() {
var jsonFile = '_src/_data/pages.json',
tempFile = '_src/_ejs/_template.ejs',
json = JSON.parse(fs.readFileSync(jsonFile, 'utf8')),
pages = json.pages,
id;
for (var i = 0; i < pages.length; i++) {
id = pages[i].id;
gulp.src(tempFile)
.pipe(ejs({
jsonData: pages[i]
}))
.pipe(rename(id + '.html'))
.pipe(gulp.dest('dist'));
}
});
|
JSONをパース→テンプレートに渡してhtmlを生成→ファイル名をリネーム
という流れをfor文で回してページ生成します。
という流れをfor文で回してページ生成します。
テンプレートを作成
_header.ejs
1
2
3
4
5
6
7
8
9
10
11
12
|
<% var data = jsonData; %><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><%= data.title %> | EJS DEMO PAGE</title>
</head>
<body>
<header class="header">
<h1><%= data.title %></h1>
</header>
|
一行目の
<% var data = jsonData; %>で、gulpfile.jsの処理でパースしたJSONデータのオブジェクトからデータを取得できますので、<%= data.title %>のようにするとタイトルが表示できます。_template.ejs
1
2
3
4
5
6
7
8
9
10
|
<% include _header %>
<% var data = jsonData; %>
<div class="main">
<% data.photos.forEach(function(p){ %>
<div><img src="images/<%= p.photo %> alt="" /></div>
<% }) %>
</div><!-- main end -->
<% include _footer %>
|
<% include _header %>や<% include _footer %>でヘッダー、フッターをインクルードしています。
そしてforEachメソッドでページデータを取り出しています。最初はfor文を使ったのですが、条件式に
.lengthを使うとdefinedエラーが出て実行できませんでした。forEachを使うのが良いようです。
※_footer.ejsは割愛します。
テンプレートを作成したら、タスクを実行
以下のコマンドでタスクを実行すると、JSONで設定したidをファイル名にしたhtmlが生成されます。今回はやってませんが、watchで監視して動的に生成することも可能です。
gulp ejs参考：
