pug の中から moment.js を使用する

pug を使っていて、テンプレートの中で時刻表示を操作したく、gulp + pug + moment.js の使用方法を調べた

pug ファイルの例

- var sample = moment('2017-04-22 15:30');

time(
  datetime=sample.format('Y-MM-DD HH:mm')
  aria-label=sample.format('LLLL')
) #{sample.format('Y.MM.DD.ddd.HH:mm.')}

こんな感じで時刻を変数にしておき、1ヶ所変えるだけで複数箇所の表示が変えられるようにしたかった

gulpfile

結論、gulp-pug の locals に moment.js のオブジェクト渡すだけでOK
(別に moment.js に限った話しではなかった)

const gulp = require('gulp');
const pug = require('gulp-pug');
const moment = require('moment');

gulp.task('default', () => {
  gulp.src('pug/**/*.pug')
  .pipe(pug({
    locals: {
      moment: moment
    }
  }))
  .pipe(gulp.dest('dist'));
});

これだけで、pug の中で渡された moment.js が使えるようになる

出力結果

<time datetime="2017-04-22 15:30" aria-label="Saturday, April 22, 2017 3:30 PM">2017.04.22.Sat.15:30.</time>

こんな感じで出力可能に。べんり。