EJSで外部jsonにまとめたmeta情報の読み込みができない

Question

前提・実現したいこと

gulp+ejsで静的HTMLを作っています。
各ページのmeta情報を外部のjsonファイルに持たせておいて、
ejsで該当のデータを読み込むようにしたかったのですがうまく動きません。

発生している問題・エラーメッセージ

明確なエラーは出ず、

Starting 'ejs' ...
Finished 'ejs' after 1.51ms
undefined

このようにタスクを処理した後undefinedとだけ表示されて
JSONの読み込みに失敗しているようです。

該当のソースコード

//data.json
{
	"default": {
		"sitename": "サイト名",
		"title": "ページタイトル",
		"description": "Your Site Description",
		"rootUrl": "/",
		"imgPath": "/assets/img/",
		"ogpImage": "http://example.com/ogp-image.jpg",
		"url": "http://example.com/",
		"type": "article"
	},
	
	"home": {
		"title": "サイト名（ホーム用）",
		"description": "Description（ホーム用）",
		"type": "website"
	},
	
	"under": {
		"title": "サイト名（下層用）",
		"description": "Description（下層用）"
	}

const gulp = require("gulp");
const fs = require( 'fs' );
const ejs = require("gulp-ejs");
const rename = require('gulp-rename');
const dir = {
    src: './src/',
    dist: './dist/'
};
//gulp-ejs
gulp.task('ejs', function(done){
		const json_path = "./src/ejs/data.json";
		const json = JSON.parse(fs.readFileSync(json_path));
		
    gulp.src([dir.src + 'ejs/**/*.ejs', '!' + dir.src + 'ejs/**/_*.ejs']) 
        .pipe(plumber({
            errorHandler: function(err) {
            console.log(err.messageFormatted);
            this.emit('end');
           }
          }))
        .pipe(ejs({data:json}))
        .pipe(rename({extname: '.html'}))
        .pipe(gulp.dest(dir.dist))
        .pipe(browser.reload({stream:true}));
    done();
});

//_head.ejs

<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }
-%>
//〜省略〜
<title><%= page['title'] %></title>
<meta name="description" content="<%= page['description'] %>">

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">

<!-- ogp -->
<meta property="og:title" content="<%= page['title'] %>">
<meta property="og:type" content="<%= page['type'] %>">
<meta property="og:url" content="<%= page['url'] %>">
<meta property="og:image" content="<%= page['ogpImage'] %>">
<meta property="og:site_name" content="<%= page['sitename'] %>">
<meta property="og:description" content="<%= page['description'] %>">

//index.ejs
<%-
  include('./inc/_head', {
    page: json['home']
  });
%>

試したこと

参考：ejsでjsonを読み込みmeta情報を一括管理
参考：EJS：JSONファイルを利用してタイトルやメタ情報を管理しやすくする方法

この辺を参考にしてコードを記述し、
比較して見直してみましたが、何が悪いのか分かりませんでした。
エラーが出てくれればまだあたりもつけられるのですが、undefinedだけだと
どこを検討すればいいのか分からず困っております。

補足情報（FW/ツールのバージョンなど）

node: v12.2.0
gulp: v4.0.2
gulp-ejs: v4.1.2

その他不足している情報がありましたらご一報ください。
よろしくお願い申し上げます。

Answer 1

undefined と表示される理由は、 error オブジェクトに messageFormatted プロパティが存在しないためです。次に、エラーが発生し EJS のコンパイルが出来ていない理由は、 gulpfile.js にて ejs ファイルに渡しているキーの名前と、各 ejs ファイルで指定しているキー名が異なるためです。

ejs(data, options)
data
Type: hash Default: {}
A hash object where each key corresponds to a variable in your template.

gulpfile.js のキー名に合わせるならば、各 ejs ファイルは以下のように変更する必要があります。

index.ejs

<%-
include('./inc/_head', {
page: data['home']
});
%>

_head.ejs

<%
var _default = data['default'];
for (var key in _default) {
    if (typeof page[key] === 'undefined') {
        page[key] = _default[key];
    }
}
-%>
<title><%= page['title'] %></title>
<meta name="description" content="<%= page['description'] %>">

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">

<!-- ogp -->
<meta property="og:title" content="<%= page['title'] %>">
<meta property="og:type" content="<%= page['type'] %>">
<meta property="og:url" content="<%= page['url'] %>">
<meta property="og:image" content="<%= page['ogpImage'] %>">
<meta property="og:site_name" content="<%= page['sitename'] %>">
<meta property="og:description" content="<%= page['description'] %>">

Comments

[aKusano]

ありがとうございます！！
無事エラー解消されました。助かりました！！

> EJS のコンパイルが出来ていない理由は、 gulpfile.js にて ejs ファイルに渡しているキーの名前と、各 ejs ファイルで指定しているキー名が異なるためです。

ちなみに「gulpfileでejsファイルに渡しているキーの名前」というのがどこのことなのかしばらく分からなくてコードとにらめっこしていましたが、

> .pipe(ejs({data:json}))

ここの「data」がキー名という認識で間違いないでしょうか？
（ここの名前と各ejsファイルのキー名を連動させて変更して確認したので合ってると思いますが）

やはりコピペするだけじゃなくてちゃんと構文の意味を理解しないとダメですね…（汗）がんばります。

[s8_chu]

> ここの「data」がキー名という認識で間違いないでしょうか？
はい、その認識で間違いありません。

> やはりコピペするだけじゃなくてちゃんと構文の意味を理解しないとダメですね…
おっしゃるとおりだと思います (個人的には、コピペして動いてくれればうれしいですが)。質問文のコード中で使用されている Gulp や Browsersync にも、 Qiita やブログの古い記事には反映されていない重要 (？) な変更点があるので、一度よく使用するパッケージの公式ドキュメントを読んでみても良いかもしれません。