gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

Nunjucksの基本的な使い方 -extends,block,include-で紹介したNunjucksをgulpでコンパイルする方法を紹介します。

gulpの基本的な使い方についてはgulp|gulpの基本的な使い方で紹介しています。

gulp-nunjucks-render

今回はgulp-nunjucks-renderを使用します。

まずは、コマンドラインでgulp-nunjucks-renderをインストールします。

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

gulpのタスクは下記のように定義します。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render'); //gulp-nunjucks-renderを参照します

gulp.task('compile', function(){
  gulp.src(['src/**/*.njk',
            '!src/**/_*.njk'])
    .pipe(nunjucksRender())
    .pipe(gulp.dest('dst'));
});

ファイル指定時に!src/**/_*.njkとし、ファイル名の先頭に_の付いているファイルは対象外としています。

extendsされるベースファイルやincludeされるファイルは対象外とするためです。（ベースファイルやincludeされるファイルのhtmlファイルは作成しない）

相対パス

例えばsrc/nunjucks/test.njkのファイル内でsrc/include/_include.njkをincludeする場合、{% include '../include/_include.njk' %}となります。

また、src/nunjucks/test/test.njkのファイル内でsrc/include/_include.njkをincludeする場合、{% include '../../include/_include.njk' %}となります。

上記のように、他のファイルをincludeしたりextendsしたりする場合、ファイルを指定するときは自分自身のファイルの相対パスとなるので、階層の違う複数のnunjucksファイルだと、同じファイルをincludeする場合でも、それぞれのファイルで異なるファイルパスを指定しなければなりません。

以下のようにconfigureを指定すれば、すべてのファイルの相対パスが、指定したパスになります。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render'); //gulp-nunjucks-renderを参照します

gulp.task('compile', function(){
  nunjucksRender.nunjucks.configure('src/'); //相対パスを指定
  gulp.src(['src/**/*.njk',
            '!src/**/_*.njk'])
    .pipe(nunjucksRender())
    .pipe(gulp.dest('dst'));
});

上記のように相対パスを指定しておけば、src/include/_include.njkをincludeする場合はどの階層のファイルでも{% include 'include/_include.njk' %}とすればよくなります。

追記

最新のバージョンでは、以下のように相対パスを設定します。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render'); //gulp-nunjucks-renderを参照します

gulp.task('compile', function(){
  gulp.src(['src/**/*.njk',
            '!src/**/_*.njk'])
    .pipe(nunjucksRender({path:'src/'})) //相対パスを指定
    .pipe(gulp.dest('dst'));
});

gulp-data

gulp-dataと組み合わせると、引数のような形で各ファイルにデータ（変数など）を渡すことができます。各ファイルでは、渡された変数を元にhtmlをコンパイルすることができます。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data'); //gulp-dataを参照します

gulp.task('compile', function(){
  var params ={
      param1:'パラメータ1',
      param2:'パラメータ2'
    };
  nunjucksRender.nunjucks.configure('src/'); //相対パスを指定
  gulp.src(['src/**/*.njk',
            '!src/**/_*.njk'])
    .pipe(data(params)) //パラメータを指定します
    .pipe(nunjucksRender())
    .pipe(gulp.dest('dst'));
});

Nunjucksファイルで渡された変数を出力することができます。

p1.njk

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
</head>

<body>
  {{ param1 }} <!-- "パラメータ1"と出力されます -->
  {{ param2 }} <!-- "パラメータ2"と出力されます -->
</body>
</html>