옛날의 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

이제 포함 할 수 있습니다

주의점

이전의 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 함수의 인수에 절대 경로가 내려온다(또는 내려왔다). 수수께끼의 지식이 되었다.