gulp nunjucksをコンパイルしてhtmlに変換する

gulp markdownを変換してnunjucksで扱うでfront-matterやmarkdownの内容をgulp-dataでデータとして渡すところまで実装しました。

nunjucksで記載されたテンプレートエンジンをhtmlに変換します。

必要なパッケージをインストール

今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。

$ npm install --save-dev gulp-nunjucks-render

以下のようにすればnunjucksで記載されたファイルのコンテンツをhtmlにコンパイルします。

gulpfile.babel.js

.pipe($.nunjucksRender())

gulp-nunjucks-renderの設定

特に設定をしなくても正しく動作するのですが、以下のような設定をおこなっておくとnunjucksの実装がスムーズに進みます。

$.nunjucksRender()の引数にoptionの値をセットすれば、設定が反映されます。

gulpfile.babel.js

const option = {}; //オプションを設定

// task処理一部抜粋
.pipe($.nunjucksRender(option))

自動エスケープの停止

nunjucksRenderはデフォルトで変数をエスケープします。

markdownをコンパイルしたhtmlのデータを出力すると、htmlのタグが全てエスケープされてしまうため、この機能をOFFにします。

gulpfile.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';

const $ = gulpLoadPlugins();

const option = {
  envOptions: {
    autoescape: false
  }
}; //オプションを設定

// task処理一部抜粋
.pipe($.nunjucksRender(option))

front-matterとmarkdownのデータを出力

gulp front-matterの内容をdataとして使用するとgulp markdownの内容をhtmlに変換するで取得したdataをnunjucksで使用します。

以下のようにタスクを設定します。

I gulpをES2015で実装するで紹介したように、gulpfileはES2015の記法で実装しています。

gulpfile.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import marked from 'marked';
import hljs from 'highlight.js';
import fm from 'front-matter';

const $ = gulpLoadPlugins();

const option = {
  envOptions: {
    autoescape: false
  }
}; //nunjucksの設定

// task処理一部抜粋
.pipe($.data((file) => {
  const content = fm(String(file.contents));
  // ファイルの内容を設定します（front-matterの記載部分を取り除く）
  file.contents = new Buffer(content.body);
  // front-matterの情報をデータとして返します
  return { meta: content.attributes };
}))
.pipe($.data((file) => {
  // html形式に変換します
  const md = marked(String(file.contents), {
    highlight: (code, lang, callback) => hljs.highlight(lang, code).value
  });
  // ファイルのコンテンツはnunjucksのテンプレートに置き換えます
  // front-matterに未定義の場合はdefault.njkを読み込みます
  file.contents = new Buffer(fs.readFileSync(file.data.meta.layout || 'default.njk').toString());
  // html形式に変換したデータを返します
  return { md }
}))
.pipe($.nunjucksRender(option))

nunjucksのテンプレートを以下のようにして、dataの内容を出力します。

foo.njk

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--front-matterの情報を出力-->
    <title>{{ meta.title }}</title>
    <meta name="description" content="{{ meta.description }}">
  </head>
  <body>
    <!--markdownの情報を出力-->
    {{ md }}
  </body>
</html>