Posted at

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

More than 3 years have passed since last update.

ステマです。

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

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

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

こうなります。


jekyll 風に

gulp-markdowngulp-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

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

<!DOCTYPE html>

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

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


  1. gulp-front-matter が test.md の front-matter 部分を解釈した結果を file のプロパティとして付与。front-matter 部分は削除される。

  2. gulp-markdown が markdown を html に変換

  3. 変換後のデータを 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, その他いろんなエンジンを利用できます。

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