21
16

More than 5 years have passed since last update.

gulp-jade で JSON ファイルを変数に読み込む方法(gulp-pug v2 対応追記)

Last updated at Posted at 2016-05-07

jade でサイトを作成していると、共通情報は外部ファイルにまとめて記述したくなります。やはり jade なので、外部ファイルは JSON 形式にまとめておきたいところですね。

先に結論

gulp-data を使いましょう。
gulp-jade に使い方も紹介されてます。

gulp-data を使わない方法

公式の方法に辿り着く前に、ろくすっぽ調べずに自己流で JSON データをパースしてました…。
果たしてこの方法に需要があるのかどうか分かりませんが、試行錯誤の時間を無為にするのも悔しいので、まあ、こんな方法もあるよーということで、晒しておきます。

site.json
{
  "name": "サイトタイトル",
  "root": "/"
}
demo.jade
//- パースしたJSONデータを格納するグローバル変数
- var data = {}

//- JSON 構文をパースしてグローバル変数の data にデータを格納する mixin
mixin json(name)
  - var oldbuf = buf
  - buf = []
  block
  - data[name] = JSON.parse(buf.join(''))
  - buf = oldbuf

//- 外部 JSON 情報の読み込み
+json('site')
  include site.json

//- 呼び出し
h1: a(href=data.site.root) #{data.site.name}

解説

jade 標準出力を横取りして JSON をパースしてます。
最後に読み込んだ JSON が標準出力されないよう、バックアップしていた buf を書き戻してます。 buf は jade の mixins で使われている内部変数ですので、あまり行儀の良いやり方ではありませんが…

強いてこの方法の利点を挙げれば

  • gulpfile.js に 設定ファイルの記述なしに jade の構成ファイルの記述内で完結できる
  • gulp-data が何らかの理由により使えない環境の代替となる

と言ったところでしょうか。

gulp-pug v2 対策(2016年6月23追記)

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 と記述するルールとします。

demo.pug
//-data site.json

//- 呼び出し
h1: a(href=data.site.root) #{data.site.name}

pug コンパイルのタスクで、前述の JSON パスコメントを検知して、オブジェクトとして取り込むように、以下のように記述します。

gulpfile.js
'use strict';

var gulp = require('gulp');
var pug  = require('gulp-pug');
var data = require('gulp-data');

gulp.task("pug", function(){
  return gulp.src("./*.pug")
    .pipe(data(function(file) {
      var json = {};
      String(file.contents).split("\n").forEach(function(line) {
        if(line.match(/^\/\/\-\s*?data\s+?((\w+)\.json)$/)) {
          json[RegExp.$2] = require("./" + RegExp.$1);
        }
      });
      return { data: json };
    }))
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest("./"))
   ;
});

これで 指定した JSON ファイルの内容を data.[ファイル名] のデータとして pug から参照できるようになりました。

21
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
16