EJSを使ったコーディング実践 ― ②.ejsから.htmlをフォルダ分けしてコンパイル

前回の記事から「EJSを使ったコーディング実践」ということで、GulpとEJSを使って下記の作業を実践中。

最終的にEJSでやりたいこと

  • ①JSONデータからHTMLファイルを一括生成
  • ②.ejsから.htmlをフォルダ分けしてコンパイル
  • ③ヘッダ、フッタは1つの外部ファイルで作成して共通化
  • ④下層ページがあるページにはサイドナビを設置し、下層ページヘのリンクを貼る
  • ⑤サイドナビ、パンくずリストを外部ファイルのJSONデータから生成
  • ⑥ページごとのコンテンツ(共通では無い部分)は別ファイルで作成

前回はGulpとEJSを使って「①JSONデータからHTMLファイルを一括生成」方法を紹介。

そこではHTMLを一括で生成したけど、全て同じフォルダ内にファイルが生成されていて、メンテナンス性もあまり良くない。

大体のサイトではカテゴリ別にフォルダを作ってHTMLファイルを分けて作成したりするもの。

今回、仮定で作成するサイトのページ構成は下記。

  • トップページ ー index.html
  • メニューページ ー menu.html
  • STAFF紹介トップページ ー staff-top.html
    • Aさんの紹介ページ ー staff1.html
    • Bさんの紹介ページ ー staff2.html
    • Cさんの紹介ページ ー staff3.html
  • スタイリングの写真掲載ページ(ギャラリー)ー style-gallery.html
  • 店舗紹介トップページ ー salon-top.html
    • 店舗Aの紹介ページ ー salon1.html
    • 店舗Bの紹介ページ ー salon2.html
  • お問い合わせページ ー contact.html

こういう場合、スタッフ紹介のページや店舗紹介のページは「staff」「salon」とかのフォルダのディレクトリに入れたいよねー。

てなわけで、GulpでEJSをコンパイルしてHTMLファイルを生成するときに、フォルダ分けする方法を書いてきまーす。

その前に、前回の記事でEJSをコンパイルしてできた「HTML」フォルダは中のファイルごと削除しておきましょ。
EJSを動かしてちゃんとHTMLが一括生成出来るかの確認だったから、一旦消しちゃいまふ。また今回作るから。

STEP.1pages.jsonに親idを追加。

前回の記事で作成した「ejs/data/pages.json」には、各ページのデータとしてidtitleを記述していたので、それにparentIdを追加。

親フォルダに入れないファイルのparentIdは空でok。

STEP.2gulpfile.jsのタスクの記述を変更。

下記の例のように書き換えて上書き保存。
16行目でJSONデータのparentIdを取得して、23行目でファイルを生成するフォルダをparentId名に指定。

STEP.3Gulpでejsを実行

プロジェクトのディレクトリで下記のコマンドを実行。

はい!これだけー
これで、HTMLファイルが下記のようにフォルダ分けされて生成されますたー。

root

├ ejs/
│ ├ template.ejs
│ │
│ └ data/
│ └ pages.json

html/
│ ├ salon
│ │ ├ salon-top.html
│ │ ├ salon1.html
│ └ └ salon2 .html

│ ├ staff
│ │ ├ staff-top.html
│ │ ├ staff1.html
│ │ ├ staff2.html
│ └ └ staff3.html

│ ├ contact.html
│ ├ index.html
│ ├ :

├ node_modules/
│ ├ gulp/
│ ├ gulp-ejs/
│ ├ gulp-rename/
│ ├ :

├ gulpfile.js
├ :

カテゴリごとにフォルダを分けてHTMLファイルを管理したほうが分かりやすいし、まぁこれ手作業でやるときは自然にやることだものねー。

これで「②.ejsから.htmlをフォルダ分けしてコンパイル」の完了。

簡単にできましたねー

続きはこちら(準備中)→「③ヘッダ、フッタは1つの外部ファイルで作成して共通化」

Written By:
Li

5 Comments

  1. raidock 2016-04-01 Reply
    • LiAuthor 2016-04-01 Reply
    • LiAuthor 2016-04-01 Reply
  2. raidock 2016-04-03 Reply
    • LiAuthor 2016-04-05 Reply

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です