0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

pugでyaml読み込む

Last updated at Posted at 2018-11-27

やりたいこと

データや文言などがちょっと差し変わるだけの静的なページを量産したいときなど、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)')

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

0
4
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
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?