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

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

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.njkincludeする場合、{% include '../include/_include.njk' %}となります。

また、src/nunjucks/test/test.njkのファイル内でsrc/include/_include.njkincludeする場合、{% 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.njkincludeする場合はどの階層のファイルでも{% 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>

関連記事

  • Front Matterでファイルごとに変数を持たせる

    Front Matterを使えば、各ファイルに変数を定義して簡単に扱えるようになります。各ページの先頭に以下のように---で囲って情報を定義します。content.attributesでFront M...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


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

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのテ...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...