zukucode
主にWEB関連の情報を技術メモとして発信しています。

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

gulp markdownを変換してnunjucksで扱うfront-mattermarkdownの内容を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に変換するで取得したdatanunjucksで使用します。

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

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

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>

続きを表示

関連記事

  • gulpをES2015で実装する

    gulpをES2015で実装するための手順です。babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。


  • gulp front-matterの内容をdataとして使用する

    ブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。front-mat...


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • gulp markdownを変換してnunjucksで扱う

    実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。そのため、mar...


  • gulp markdownの内容をhtmlに変換する

    gulpでmarkdownの形式で記載したデータをhtmlに変換します。本ブログのように技術ブログの場合はコードをシンタックスハイライト(色付け)して表示したいので、highlight.jsもインスト...


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


  • gulp 引数を受け取って開発時とリリース時で処理を分岐する

    コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。minimistを使えば上記の形式で指定したパラメータ...