JSテンプレートエンジン「Nunjucks」とgulpで快適HTMLコーディング

ishida

2017.10.26

もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。
はじめてのことで、何に仮装すれば迷いまくっています。

さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。

Nunjucks とは

FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。
Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。

githubでのstar数は、4660（2017/10/26現在）です。

Nunjucks

特徴

node.js で動作
マクロ定義
オートエスケープ
リッチブロックの継承
- extends によるテンプレート継承
- block によるエリアの継承
include による外部ファイル読み込み

などです。

記述サンプル

以下が、Nunjucksのコードサンプルです。

{% extends "_layout.html" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}}

gulp を使って静的HTMLを生成する

動的生成以外にも静的にHTMLを出力することができます。gulpならね。
まずは、準備です。

gulp-nunjucks-render

npmモジュール、gulp-nunjucks-render をインストールします。
※ gulp 等のインストールはすでに出来ている前提で進めます。

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

gulpfile.js

gulp-nunjucks-render を読み込み、'nunjucks' タスクで
HTMLが出力されるようにします。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');

gulp.task('nunjucks', function () {
  return gulp.src([
    'src/nunjucks/**/*.html',
    '!src/nunjucks/**/_*.html'
  ])
    .pipe(nunjucksRender({
      path: ['src/nunjucks/']
    }))
    .pipe(gulp.dest('dist'));
});

ファイル/ディレクトリ構成

src/nunjucksディレクトリ配下に、
継承元のテンプレート（_layout_default.html）と出力用テンプレート（index.html）を用意しました。

gulpfile.js
src
└── nunjucks
      ├── _layout_default.html  
      └── index.html

継承元のテンプレート（_layout_default.html）のコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>{{ pageTitle }}</title>
</head>
<body>

<main>
{% block content_main %}
{% endblock %}
</main>

</body>
</html>

出力用テンプレート（index.htmlのコード）

{% extends "_layout/_layout_default.html" %}
{% set pageTitle = "ページタイトル" %}

{% block content_main %}
<h1>Nunjucks サンプル</h1>
{% endblock %}

gulp でタスク実行

gulpfile.js に 'nunjucks' タスクを作成したので、実行します。

$gulp nunjucks

出力結果

dist/index.html としてファイルが出力されます。
継承元のテンプレートをもとに、ページが生成されていることが分かりますね。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>

<main>

<h1>Nunjucks サンプル</h1>

</main>

</body>
</html>