2019年5月22日

Nunjucksでフレームとコンテンツを組み合わせる

Nunjucks(ナンジャックス)はテンプレートエンジンのひとつ。フレームとコンテンツを別々に用意し、gulpを使ってそれらを組み合わせてひとつの静的なHTMLを生成することができる。

フレームとコンテンツを用意

作業ディレクトリ(たとえばホームディレクトリに「gulp-test-003」)を用意し、ターミナルでアクセス。

cd ~/gulp-test-003

直下に「dev」フォルダを作成し、以下のような階層を構築する。

dev
└── template
    ├── layout
    │   └── _frame.njk
    ├── page
    │   ├── test-1.njk
    │   └── test-2.njk
    └── partial
        ├── _footer.njk
        └── _header.njk

「_frame.njk」に以下のコードを記述。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{{ pageTitle }}</title>
</head>
<body>
  {% include 'partial/_header.njk' %}
  {% block contents %}{% endblock %}
  {% include 'partial/_footer.njk' %}
</body>
</html>

「test-1.njk」に以下のコードを記述。

{% extends 'layout/_frame.njk' %}
{% set pageTitle = 'test1' %}
{% block contents %}
<p>
  Contents1
</p>
{% endblock %}

「test-2.njk」に以下のコードを記述。

{% extends 'layout/_frame.njk' %}
{% set pageTitle = 'test2' %}
{% block contents %}
<p>
  Contents2
</p>
{% endblock %}

「_header.njk」に以下のコードを記述。

<header>
  Header
</header>

「_footer.njk」に以下のコードを記述。

<footer>
  Footer
</footer>

モジュールをインストール

Nunjucksを使用するには「gulp-nunjucks-render」というモジュールを使う。gulpと一緒に作業ディレクトリにインストールする。

npm i -D gulp gulp-nunjucks-render

gulpfile.jsを作成

作業ディレクトリの直下にgulpfile.jsを作成し、以下のコードを記述。

// モジュールを読み込む
const gulp = require('gulp');
const nunjucksRender = require('gulp-nunjucks-render');

// 各パス
const paths = {
  "dev": {
    "template": "./dev/template",
    "page": './dev/template/page'
  },
  "dist": {
    "html": "./dist/html"
  }
}

// フレームとコンテンツをひとつにするタスク
function html_extend_with_nujucks(){
  // コンテンツを取得
  return gulp.src(paths.dev.page + '/*.njk')
    // フレームと合体
    .pipe(nunjucksRender({
      path: paths.dev.template
    }))
    // 本番に配置
    .pipe(gulp.dest(paths.dist.html));
}

// 「test」という名前でタスクを実行する
exports.test = html_extend_with_nujucks;

タスクを実行

npx gulp test

を実行すると、フレームなどと組み合わさった静的なHTMLとして、test-1.html、test-2.htmlが生成される。