gulp-ejs, gulp-rename,pages.jsonを使った複数のhtmlファイルを量産する方法について

前回はgulp-ejsを使い、ejsファイルを保存と同時にhtmlファイルに変換できるようになりました。

今回「index.html(ページトップ)」と「about.html」を使っているのですが、
共通部分が異なるため「_head」「_header」などを「ejs/common/top」と「ejs/common/about」にフォルダを分け入れることにしました。

そのため、gulp-renameをインストールしpages.jsonを作り、
前回作成した
gulpfile.jsに

//HTMLに変換して出力する
gulp.task("ejs", function() {
    gulp.src(
        ["app/ejs/**/*.ejs",'!' + "app/ejs/**/_*.ejs"]
    )
        .pipe(ejs({}, {ext: '.html'}))
        .pipe(gulp.dest("app/public"))

});

下記を追加しました。

gulp.task('ejs', function() {
  var jsonFile = 'app/ejs/pages.json',
      tempFile = 'app/ejs/about.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('app/public'));
  }
});

しかし、どう変更しても「about.ejs」や「ejs/common/about/_header」で変更をすると画像のようにエラーが表示されます。
（＊index.htmlも同じ反応でした）

エラーの内容が理解できず苦戦しています。
どのようにすればいいのでしょうか？
経験が浅く理解不足＆経験不足で申し訳ありません。どなたかお願いいたします。

＊「pages.json」は参考サイトを元に入れています。

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

ディレクトリ構成はこちらです