Pug(Jade)でgulpを使って複数のjsonファイルをいい感じに読み込みたい

目的

Pug(Jade)にJSONオブジェクトを渡して楽したいことがあると思う。

{
  "title":"最高のWebページ",
  "description":"最高のWebページです",
  "author":"最高の作者"
}

html(lang="ja")
  head
    title=title
    meta(name='description',content=description)
    meta(name='author',content=author)

pugファイル内でオブジェクトを変数宣言しようとしても複数行に渡る変数宣言はエラーになってしまうので、オブジェクトを書きづらいという問題がある。 なので「jsonでオブジェクトを書いてそれをどうにかしてpug内でincludeしてよしなにやりたい」となるんだけど、jsonファイルをpugの中でincludeして使うことはできないので、それをどうやるのかが割と課題だったりする。 さらに欲を言えばこんなふうにもしたい。

.
│   index.pug
~
│   
├───json
│       index.json
│       en-index.json

ってやって、jsonファイルの中にそれぞれの設定ファイルをしこんでおきたい。

解決

gulp-jadeとgulp-dataを使う。

まあだいぶ無理やりな解決なんだけど、jsonフォルダ内の中身をみて、その中にはjsonファイルしかいれないようにする。それでそのファイル名でdataの中にjsonオブジェクトを格納してjadeコンパイル時に渡すことができるので、たとえばindex.jsonの中身はdata.indexでアクセスできる。それぞれのpugファイルの先頭に例えば

- var option = data.index

みたいに書いておけば、includeするファイルにも対応できるはず。