[Qiita] gulp-pug v2.0 で JSON ファイルを変数に読み込む方法
jade は商標の問題から、pug に名前が変わりました。また、2016年6月23日時点で v2.0 がベータ版リリースされていますが、v1.11から いろいろと内部構成が変わっていて、以前に紹介した mixin で横取りする方法が使えなくなっていました。
素直に gulp-data を使った方が良さそうですが、ページ毎に適用する JSON ファイルを変更するような運用にしたいので、JSON ファイルの指定は gulpfile.js ではなく、pug ファイル側で指定したいところです。 pug 自体に外部 JSON ファイルをパースする機能があれば良いのですが、残念ながら現時点では自前で用意するしかなさそうです。
タスク側から pug に記述した JSON ファイルを取得する
pug 本体に手を加えるのは時間がかかりそうなので、手っ取り早く gulpfile.js のタスク処理側でカバーします。 ページ側に特定書式コメントの JSON ファイルのパスを指定しておき、タスクの gulp-data 経由で JSON ファイルを読み込むようにします。
pug コメントの後に続けて data path/to/filename.json
と記述するルールとします。
pug コンパイルのタスクで、前述の JSON パスコメントを検知して、オブジェクトとして取り込むように、以下のように記述します。
これで 指定した JSON ファイルの内容を data.[ファイル名]
のデータとして pug から参照できるようになりました。
※この記事はQiitaとのマルチポストになります。