ejsでjsonを読み込みmeta情報を一括管理

編集ファイル

• gulpfile.js
• _head.ejs（パーシャル化）
• meta.json
• 各個別ページのejsファイル

先ず、gulpfile.jsに設定を記述する。
jsonファイルを読み込むのに必要な「fs（File System）」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。
タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。

gulpfile.js

// gulp core
var gulp = require('gulp');
//fsファイルの読み込み
var fs = require( 'fs' );
var ejs = require("gulp-ejs");
var rename = require("gulp-rename");


gulp.task('ejs', function() {
  var json = JSON.parse(fs.readFileSync("../ejs/includes/meta.json","utf-8"));
  gulp.src(
      ["../ejs/**/*.ejs", '!' + "../ejs/**/_*.ejs"] 　//参照するディレクトリ、出力を除外するファイル
    )
    .pipe(ejs({json:json}))　//jsonの読み込み
    .pipe(rename({
      extname: ".html"
    })) //拡張子をhtmlに
    .pipe(gulp.dest("./"));
});

_head.ejsの頭に下記ソースを挿入。もし該当ページのmeta情報がなければdefaultの情報を入れるという記述。

_head.ejs

<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }
-%>

各meta要素のcontent部分に、<%= page['出力名'] %>といった記述を挿入。
descriptionやtitleといったjsonファイルで設定したものを載せる。

_head.ejs

~省略~
<meta name="description" content="<%= page['description'] %>" />
<meta property="og:title" content="<%= page['title'] %><%= page['sitename'] %>">
<meta property="og:image" content="<%= page['ogp_img'] %>">
<meta property="og:description" content="<%= page['description'] %>">
<meta property="og:url" content="<%= page['url'] %>">

meta.jsonにオブジェクトを記述していく。

defaultというオブジェクトが基本的に記述されるmeta情報。
その下に続けて書いてあるtopやaboutがページごとに設定していく情報。
この場合トップページとアバウトページになる。

meta.json

{
  "default": {
    "title": "ページタイトル",
    "description": "ディスクリプション！",
    "url":"サイトURL",
    "ogp_img": "ogp画像",
    "sitename": "配下ページタイトルの末尾に着けるサイト名（｜株式会社○○など）"
  },
  "top": {
    "sitename": ""
  },
  "about": {
    "title": "アバウト",
    "url":"https://exsample.com/about/"
  }
}

※各オブジェクトの末尾はカンマをつけないこと。
jsonファイルは続けて記述する場合のみカンマをつける。でないとエラーがでる。

meta.json

{
  "default": {
    "title": "ページタイトル",
    "description": "ディスクリプション",
    "url":"サイトURL",
    "ogp_img": "ogp画像のパス",
    "sitename": "配下ページタイトルの末尾に着けるサイト名（｜株式会社○○など）", ←NG
  },
  "top": {
    "sitename": ""
  },
  "about": {
    "title": "アバウト",
    "url":"https://exsample.com/about/"
  }, ←NG
}

_head.ejsとmeta.jsonの設定が完了したら、あとはページごと個別にファイルを読み込んでいく。

index.ejs(トップ)

<%-
  include('./includes/_head', {
    page: json['top']
  });
%>

index.ejs（アバウト）

<%-
  include('../includes/_head', {
    page: json['about']
  });
%>

上記のように、ejsファイルの頭にjsonを読み込む記述を置く。
そうすると、対応したオブジェクト名の値が読み込まれ、meta情報が書き出される。

ここまで書いたら、あとはコンパイルするのみ。お疲れ様でした。