前回は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のディスクリプション" } ] }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。