gulp-pugを使っている時に、pugでmarkdownをincludeするべく、filterを書いてみた。

6980 ワード
pug Markdown gulp Markdown テキストリンク

昔のjadeであれば、普通にすんなりmarkdownぐらいincludeできていたのになあ。

jadeの頃はこんなに簡単だった。
include:md ./include.md

特にjadeのfilterなどの実装は必要なかった。

pugでこれをやろうとしたらできなかったが、どうしてもmarkdownが書きたくてgulpfile.babel.jsをちょっといじった。

どうやってやったか。

手順はだいたい2つ。

1. gulpfile.babel.jsからfilterを追加。

gulp-jadeと同じようにしてfilterを追加したら普通に動いた。

gulpfile.babel.js
import marked  from 'marked';
import pug     from 'pug';
import fs      from 'fs'
import gulpPug from 'gulp-pug';

pug.filters.markdownInclude = function (filePath) {
  var str = fs.readFileSync(filePath).toString();
  return marked(str);
}

gulp.task('pug', () => {
  gulp.src('path/to/src.pug')
    .pipe(gulpPug({
      pug: pug
    }))
    .pipe(gulp.dest('./path/to/dest/'));
});

2. 実際のpugファイルでmarkdownをinclude

src.pug
include:markdownInclude ./include.md

これでincludeできる

注意点

以前のmarkdown用のfilterだとこの書き方ができた。

以前はできていたこと
:md
  # hoge

  * fuga
  * piyo

今回の:markdownIncludeだとそれはできない。下記のような実装でならできる(気がする)。

gulpfile.babel.js
import marked  from 'marked';
import pug     from 'pug';
import gulpPug from 'gulp-pug';

pug.filters.md = function (str) {
  return marked(str);
}

gulp.task('pug', () => {
  gulp.src('path/to/src.pug')
    .pipe(gulpPug({
      pug: pug
    }))
    .pipe(gulp.dest('./path/to/dest/'));
});
上記のgulpfile.babel.jsならこれでできる。
:md
  # hoge

  * fuga
  * piyo

謎の知見

pugの場合だとinclude:filter-nameと同じ行に相対パスを書くと、gulpfile上で実装したfilterの関数の引数に絶対パスが降ってくる(というか降ってきた)。謎の知見になった。