やりたいこと

データや文言などがちょっと差し変わるだけの静的なページを量産したいときなど、pugで作ったテンプレートに文言をざくざく流し込めばいいんじゃね？という気分になります。
世の中ね、そんな泥臭い仕事まっだまだたくさんあるのですのよ。

event.pug

-
  // このデータを差し替えて使いまわしたい
  var data = {
    eventName: '第13回 芋煮会',
    eventDate: '2018/12/24'
  }
-

h1.event-name!= data.eventName
time.event-date!= data.eventDate

これくらいならいいんですが、せっかくなのでもっと簡単に書いて別ファイルにして読み込みなどすればもっと生産性が上がるのではないか。
自分以外の人に書いてもらうにしても取り回しが全然楽であるし。

data.yaml

eventName: 第13回 芋煮会
eventDate: 2018/12/24

こういうのを読み込みたい。誰かに書いてもらって読み込むだけの簡単なお仕事にしたい。

pugにyamlを読み込むには

pugからhtmlへの変換にはgulpとgulp-pugを使っています。

gulpfile.js

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

...

gulp.task('html', function() {
  return gulp.src('event.pug')
  .pipe(pug({
    pretty: true,
    locals: {
      fs: require('fs'),
      path: require('path'),
      jsyaml: require('js-yaml')
    }
  })).pipe(gulp.dest('event'));
});

js-yamlはあらかじめインストールしておいてください。

pugファイルはこのように。

event.pug

- var data = jsyaml.load(fs.readFileSync(path.resolve('path/data.yaml')))

h1.event-name!= data.eventName
time.event-date!= data.eventDate

これでpugのなかでyamlの取り回しができるようになります。

おまけ。

せっかく中のデータを書い（てもらっ）たのに、日付の書式変えて、とかいとも簡単に言われたりした時に。
ベタですが、私はmoment.jsを使っています。

moment.jsをインストールして、先ほどの gulpfile.js にちょっと追加。

gulpfile.js

gulp.task('html', function() {
  return gulp.src('event.pug')
  .pipe(pug({
    pretty: true,
    locals: {
      fs: require('fs'),
      path: require('path'),
      jsyaml: require('js-yaml'),
      moment: require('moment')
    }
  })).pipe(gulp.dest('event'));
});

event.pug

- var data = jsyaml.load(fs.readFileSync(path.resolve('path/data.yaml')))
- var date = moment(data.eventDate, 'YYYY/M/D')
// ここでロケールを指定すると曜日の出力形式も調整できます
- moment.locale('ja')

h1.event-name!= data.eventName
time.event-date!= date.format('YYYY年MM月DD日(ddd)')

このように、出力フォーマットを変更することができます。

pugでyaml読み込む

やりたいこと

pugにyamlを読み込むには

おまけ。