Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ）

似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。

そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。

1 今回使用するもの
2 各ファイルの設定
3 出力
4 結果
- 4.1 page1.html
5 おわり

今回使用するもの

今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。

テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。

gulp-ejs
gulp-rename
pages.json
template.ejs
gulp.js

各ファイルの設定

pages.json

ユニークな値を格納するJSONファイルは下記の通りです。

{
  "pages": [
    {
      "id": "page1",
      "title": "ページ1のタイトル",
      "description": "ページ1のディスクリプション"
    },
    {
      "id": "page2",
      "title": "ページ2のタイトル",
      "description": "ページ2のディスクリプション"
    },
    {
      "id": "page3",
      "title": "ページ3のタイトル",
      "description": "ページ3のディスクリプション"
    },
    {
      "id": "page4",
      "title": "ページ4のタイトル",
      "description": "ページ4のディスクリプション"
    }
  ]
}

idはhtmlのファイル名となる値です。titleとdescriptionはその名の通りです。

template.ejs

今回はhtmlファイル名、titleとdescriptionをユニークな値とし、それぞれの値をJSONファイルから読み込んでhtmlファイルを生成する想定でテンプレートを作成します。

<% 
var data = jsonData;
%><!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="<%= data.description %>">
  <title><%= data.title %></title>
</head>
<body>
タイトルは<%= data.title %>
ディスクリプションは<%= data.description %>
</body>
</html>

2行目の変数dataにJSONファイルのデータを格納して、data.titleのように値にアクセス出来るよう設定しています。

ちなみに3行目の%>以降に続けて<!DOCTYPE html>を記述しているのは、改行するとhtmlに変換された際に1行目に空行が出来てしまうからです。

gulpfile.js

続いてgulpfile.jsの設定です。

'use strict';
var fs =require('fs'),
    gulp = require('gulp'),
    ejs = require('gulp-ejs'),
    rename = require('gulp-rename');

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ファイルはnode.jsのファイルシステムを使用して非同期で読み込んでいます。requireを使用しても読み込めますがキャッシュしてしまいますのでreadFileSyncを使用します。

出力

以上で設定は終了です。後はターミナルでコマンドを打てばhtmlが生成されます。

$ gulp ejs

結果

正常に動けば、下記の様なhtmlが生成されます。下記はpage1.htmlの生成結果です。

page1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="ページ1のディスクリプション">
    <title>ページ1のタイトル</title>
</head>
<body>
タイトルはページ1のタイトル
ディスクリプションはページ1のディスクリプション
</body>
</html>

おわり

EJSは他のテンプレートエンジンに比べて学習コストも低く、導入も簡単なのでおすすめです。今回は簡単な例でご紹介しましたが、応用次第で作業効率を大幅に向上させられそうです。