gulp-layoutでjekyll風markdownをhtmlにする #Markdown

ステマです。

gulp-layout というプラグインを作ったので、その紹介になります。

インストール

いつもの

npm install gulp-layout

gulpfile.js のサンプル

シンプルな例

単純なテンプレート機能として使うなら、下記のように書くだけです。

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

gulp.task('build', function() {
  return gulp.src('./src/test.html')
    .pipe(layout({
      title: 'Hello World',
      layout: 'post.jade'
    }))
    .pipe(gulp.dest('./dist'));
});

src で指定したファイルが post.jade の中に埋め込まれて、いい感じに dist に吐き出されます。上記の例であれば、

(src) test.html:

<p>gulp</p>

(layout) post.jade:

h1= title
|!= contents

この２つが組み合わさって

<h1>Hello World</h1><p>gulp</p>

こうなります。

jekyll 風に

gulp-markdown や gulp-fornt-matter を組み合わせれば、markdown で書いて front-matter で使用するテンプレートやその他の情報を渡すことができます。

関数を渡すとfileオブジェクト付きでコールされ、return した値がそのままHTMLのビルド時に利用されます。fileのプロパティを見てテンプレートを変更したり、渡すデータを変えたりできます。

例では、gulp-front-matter が file にくっつけた frontMatter プロパティをそのまま返しています。

var gulp = require('gulp');
var frontMatter = require('gulp-front-matter');
var markdown = require('gulp-markdown');
var layout = require('gulp-layout');

gulp.task('build', function() {
  return gulp.src('./src/**/*.md')
    .pipe(frontMatter())
    .pipe(markdown())
    .pipe(layout(function(file) {
      return file.frontMatter;
    }))
    .pipe(gulp.dest('./dist'));
});

(src) test.md:

---
title: Hello World
layout: post.jade
---

gulp

(layout) post.jade:

doctype html
html
  head
   title= title
  body
    != contents

この２つが組み合わさって、

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>gulp</p>
  </body>
</html>

こうなります（結果は pretty にしてます）。処理の流れとしては下記のようになります。

gulp-front-matter が test.md の front-matter 部分を解釈した結果を file のプロパティとして付与。front-matter 部分は削除される。
gulp-markdown が markdown を html に変換
変換後のデータを gulp-layout を使って jade ファイルに埋め込み

補足

jekyll の名前をちょくちょく出してますが、本当は metalsmith 相当のことを gulp で実現しようと思って、このプラグインを作りました。手元では metalsmith の gulp 移植版的なものができているので、いずれ時間をみつけて公開しようと思います。

また、別に gulp-markdown を挟まなくても、下記みたいな html を解釈することも出来ます（これも metalsmith 的な動き）。ただ、これだと jade の extend なりを使うほうが速度面で優れてると思います。

---
layout: post.jade
---

<h1>テスト</h1>

Consolidate.js を使っているので、jekyll みたいに liquid を使うこともできますし、例の jade や ejs, haml, その他いろんなエンジンを利用できます。

よろしければ使ってやって下さい。