読者です 読者をやめる 読者になる 読者になる

helen's blog

ぽんこつによるぽんこつのためのぽんこつブログ

GulpとEJSで設定をできるだけ減らしてみた

設定ファイルを手で書くとミスるし
ストレスマッハなのでがんばって減らしてみました

ファイル構成

ページの中身をcontentsとしてURLに合わせてディレクトリを切り、
それぞれのjndex.ejsの上下にheadやらfooterやらをくっつけて使います

.
├── contents # ページの中身
│   ├── index.ejs
│   └── hoge
│       └── fuga
│           └── piyo
│               └── index.ejs
└── layouts
    ├── common # front、mypageから使う共通系パーツ
    │   ├── _navi.ejs
    │   ├── _localNavi.ejs
    │   ├── _logged.ejs
    │   └── _notLogin.ejs
    ├── front # フロントで使用するパーツ
    │   ├── _footer.ejs
    │   └── _headTag.ejs
    ├── frontAfterContent.ejs # フロントの要素の後につけるパーツ
    ├── frontBeforeContent.ejs  # フロントの要素の前につけるパーツ
    ├── mypage # ログイン後に使用するパーツ
    │   ├── _footer.ejs
    │   ├── _headTag.ejs
    │   └── _header.ejs
    ├── mypageAfterContent.ejs # ログイン後の要素の後につけるパーツ
    └── mypageBeforeContent.ejs # ログイン後の要素の前につけるパーツ

headerやfooterの間をクルクル回すのをよく見るけど
for文書くとどこで何が動いてるのかわからなくなるので、
各contentsで何を呼ぶか明示します

gulpfile

ここでfor文で回すのをよく見るけどやらず、コンパイルして拡張子をhtmlにしてるだけ
contents/**/*.ejsな感じにすると
ディレクトリ階層を維持したままコンパイルしてくれるので設定書かなくて済む

const gulp = require('gulp');
const ejs = require('gulp-ejs');
const jsonData = require('./settings.json');

gulp.task('default', ['main']);
gulp.task('main', ['ejs']);

gulp.task('ejs', function(){
    return gulp.src(
        ['contents/**/*.ejs', '!' + 'contents/**/_*.ejs']
    )
        .pipe(ejs({jsonData:jsonData}, {'ext': '.html'}))
        .pipe(gulp.dest('../'));
});

setting.json

設定をまとめて名前をつけて呼び出せるようにして

{
    "default":{
        "title":"title",
        "description":"description"
    },
    "hogefugapiyo":{
        "title":"fugaaaa",
        "isLogin":true
    }
}

こんな感じで呼び出す

<% data = jsonData.default; %>

特に個別の指定がなければdefaultとか書いとく感じ
CakePHPだとcontrollerでtitle、descriptionを決めれるから(こうあるべきかは別の話)
URLのコントローラーまでの設定を作っとけば
同じコントローラーのアクションどうしはその設定を使いまわせるっていう幸せ

呼び出し

使いたい設定の名前を変えるだけ

<% data = jsonData.default; %>
<%- include('../layouts/frontBeforeContent', data); %>
<!-- 要素 -->
<%- include('../layouts/frontAfterContent'); %>
<!-- frontAfterContentは渡すデータがないから書いてないけどdataあると今後幸せになれそう -->

で、上下のパーツは

$ cat layouts/frontBeforeContent.ejs
<!DOCTYPE html>
<html>
  <%- include('../layouts/front/_headTag', data) %>
  <body class="lo1 skin-blue">
    <%- include('../layouts/common/_gnavi') %>
    <%- include('../layouts/common/_makeNavi') %>
    <%- include('../layouts/common/_akibaNavi', data) %>
$ cat layouts/frontAfterContent.ejs
    <%- include('../layouts/front/_footer') %>
  </body>
</html>

各小パーツを呼び出すだけにして、
1箇所いじれば全部に反映されるようになってる

ログイン判定

ログイン前ログイン後で表示が変わるものは設定ファイルで管理

ログイン済みにしたいページのみsettingにこれを追加して

"isLogin":true

パーツはこんな感じにする

<% if(data.isLogins){ %>
    <%- include('../common/_logged'); %>
<% } else { %>
    <%- include('../common/_notLogin'); %>
<% } %>

まあほんとはtrue,falseで管理されてるのかわかんないけどねー
isLoginがtureってイメージしやすいからそう書いてます

json書きたくねーymlにする!って言ってたけど
最終的にymlにするのがめんどうになりました