Nunjucksで独自のファンクションを実行する
Nunjucksのテンプレートファイルに独自に定義した別ファイルのファンクションを実行する方法を紹介します。
gulpでコンパイルする場合を想定しています。
gulp-data
gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法で紹介したように、gulp-dataと組み合わせると、引数のような形で各ファイルにデータ（変数など）を渡すことができます。
同じ要領で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファンクションをテンプレートから呼び出すことができます。
例えば、以下のようなファンクションを定義したファイルを作成します。
func.jsexports.func = {
func1 : function func1(){
return 'func1test';
},
func2 : function func2(param){
return 'func2' + param;
}
};gulpfile.jsは以下のようにします。
gulpfile.jsvar gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data'); //gulp-dataを参照します
var nunjucks_func = require('func.js'); //作成したファイルを参照します
gulp.task('compile', function(){
nunjucksRender.nunjucks.configure('src/'); //相対パスを指定
gulp.src(['src/**/*.njk',
'!src/**/_*.njk'])
.pipe(data(nunjucks_func.func)) //ファンクションを指定します
.pipe(nunjucksRender())
.pipe(gulp.dest('dst'));
});以下のようにして、定義したファンクションをテンプレートファイルから呼び出すことができます。
<!DOCTYPE HTML>
<html>
<head>
<title>サンプルホームページ</title>
</head>
<body>
{{ func1() }} <!-- "func1test"と出力されます -->
{{ func2('testA') }} <!-- "func2testA"と出力されます -->
</body>
</html>