もっく日記

書いておぼえるためのブログ

ejsでHTMLを量産したときのおさらい

レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。

ながれ

  1. ページ生成用JSONファイル（pages.json）をつくる
  2. テンプレート用EJSファイル（template.ejs）をつくる
  3. EJSの設定をgulpfile.jsに追記する
  4. gulpタスクを起動

構想

フォルダ構成

↓こんなかんじで作ろうと思います。

src
    ├── __gulpfile.js__
    │ 
    ├── json
    │   └── __pages.json__
    └── ejs
        └── __template.ejs__
        
dist
└── __ejs生成HTML出力先__

JSONデータ

下記３つのデータJSONで管理しようと思います。

  • 出力ファイル名(page)
  • タイトル(title)
  • 画像ファイル名(imageSrc)

1. JSONファイル(pages.json)をつくる

① 任意の場所に pages.json をつくります。（今回はsrcフォルダ内にjsonフォルダをつくって入れました。）

② 構想どおりにJSONデータを作成。↓こんなかんじにしました。

{
  "pages": [
    {  "page" : "page1",  "title" : "タイトル1",  "imageSrc" : "000000"},
    {  "page" : "page2",  "title" : "タイトル2",  "imageSrc" : "000001"},
    {  "page" : "page3",  "title" : "タイトル3",  "imageSrc" : "000002"},
    {  "page" : "page4",  "title" : "タイトル4",  "imageSrc" : "000003"},
    {  "page" : "page5",  "title" : "タイトル5",  "imageSrc" : "000004"},
    {  "page" : "page6",  "title" : "タイトル6",  "imageSrc" : "000005"},
    {  "page" : "page7",  "title" : "タイトル7",  "imageSrc" : "000006"},
    {  "page" : "page8",  "title" : "タイトル8",  "imageSrc" : "000007"},
    {  "page" : "page9",  "title" : "タイトル9",  "imageSrc" : "000008"},
    {  "page" : "pag10",  "title" : "タイトル10",  "imageSrc" : "000009"}
   ]
}

2. EJSファイル(template.ejs)をつくる

① 任意の場所に template.ejs をつくります。（今回はsrcフォルダ内にejsフォルダをつくって入れました。）

② template.ejsに基本のHTMLをかく。（まずはふつうのHTML）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    （以下中略）
  </head>
  <body>
    <!--wrapper-->
    <div class="wrapper">
    （以下中略）
    </div>
  </body>
</html>

③ ページによって書き換えたい部分を「<%= 変数名 %>」←こういう風に書く。「data.title」と「data.imageSrc」。

（＊「data.title/data.imageSrc」はこのあとgulpfile.jsにEJSの設定を書くところで、JSONの「pages」の値を代入してる値。）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サイトタイトル - <%= data.title %></title>
  </head>
  <body>
    <!--wrapper-->
    <div class="wrapper">
        <img src="img/<%= data.imageSrc %>.png">
    </div>
  </body>
</html>

3.EJSの設定をgulpfile.jsに追記する

① ターミナルで

npm install gulp-ejs --save-dev

② gulpfile.jsにejsを追記

ejs = require("gulp-ejs")

③ gulpfile.jsにタスクを追記 （ここが大事）

gulp.task('ejs', function(){
    // ページ生成用JSONファイルの読み込み
    var jsonData = require('../src/json/pages.json');
    
    //タスクをページ毎に設定、まとめて定義
    jsonData.pages.forEach(function (data, index) {
        //PC
        gulp.src("ejs/template.ejs")
           .pipe(ejs({
                data:{ //JSONデータをテンプレートファイルに渡す
                    name: data.page,//ページ名
                    title: data.title,//タイトル
                    imageSrc: data.imageSrc,//画像ファイル名
                }
            }))
            .pipe(rename(data.page+".html")) //出力ファイル名を指定
            .pipe(gulp.dest("../dist/")); //ファイル出力先を設定
    });
});

4.gulpタスクを起動

ターミナルでタスクを実行します

gulp ejs

distフォルダ内にHTMLファイルが生成されていれば完了です。

補足　PC/SPそれぞれのテンプレートで生成したいとき

複数のテンプレートを実行したい場合はgulpfile.jsを下記のように書き換えます。

  1. PC/SPそれぞれテンプレートを作成
  2. gulpfile.jsにSP用の記述を追記
gulp.task('ejs', function(){
    // ページ生成用JSONファイルの読み込み
    var jsonData = require('../src/json/pages.json');
    
    //タスクをページ毎に設定、まとめて定義
    jsonData.pages.forEach(function (data, index) {
        //PC
        gulp.src("ejs/template.ejs")
           .pipe(ejs({
                data:{ //JSONデータをテンプレートファイルに渡す
                    name: data.page,//ページ名
                    title: data.title,//タイトル
                    imageSrc: data.imageSrc,//画像ファイル名
                }
            }))
            .pipe(rename(data.page+".html")) //出力ファイル名を指定
            .pipe(gulp.dest("../dist/")); //ファイル出力先を設定

        //SP
        gulp.src("ejs/m/template.ejs")
           .pipe(ejs({
                data:{ //JSONデータをテンプレートファイルに渡す
                    name: data.page,//ページ名
                    title: data.title,//タイトル
                    imageSrc: data.imageSrc,//画像ファイル名
                }
            }))
            .pipe(rename(data.page+".html")) //出力ファイル名を指定
            .pipe(gulp.dest("../dist/m/")); //ファイル出力先を設定
    });
});

今回使ったのはejsの<%= 変数名 %>だけでしたが、 ほかにもincludeやforなど便利な構文があるようなので折をみて使ってみたいと思います。

構文については、こちらの記事がとても勉強になりました

参考文献