[Gulp](https://github.com/wearefractal/gulp) plugin to render [Nunjucks](http://mozilla.github.io/nunjucks/) templates
Switch branches/tags
Clone or download
Latest commit c7c410b May 15, 2018


Build Status


Render Nunjucks templates

Issues with the output should be reported on the Nunjucks issue tracker.


Install with npm

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


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

gulp.task('default', function () {
  return gulp.src('src/templates/*.html')
      path: ['src/templates/'] // String or Array

Example with gulp data

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

function getDataForFile(file) {
  return {
    example: 'data loaded for ' + file.relative

gulp.task('default', function () {
	return gulp.src('src/templates/*.html')
      path: 'src/templates'



Plugin accepts options object, which contain these by default:

var defaults = {
  path: '.',
  ext: '.html',
  data: {},
  inheritExtension: false,
  envOptions: {
    watch: false
  manageEnv: null,
  loaders: null
  • path - Relative path to templates
  • ext - Extension for compiled templates, pass null or empty string if yo don't want any extension
  • data - Data passed to template
  • inheritExtension - If true, uses same extension that is used for template
  • envOptions - These are options provided for nunjucks Environment. More info here.
  • manageEnv - Hook for managing environment before compilation. Useful for adding custom filters, globals, etc. Example below
  • loaders - If provided, uses that as first parameter to Environment constructor. Otherwise, uses provided path. More info here

For more info about nunjucks functionality, check https://mozilla.github.io/nunjucks/api.html and also a source code of this plugin.


U can pass data as option, or you can use gulp-data like in example above.

nunjucksRender({data: {
  css_path: 'http://company.com/css/'

For the following template

<link rel="stylesheet" href="{{ css_path }}test.css" />

Would render

<link rel="stylesheet" href="http://company.com/css/test.css" />


If you want to manage environment (add custom filters or globals), you can to that with manageEnv function hook:

var manageEnvironment = function(environment) {
  environment.addFilter('slug', function(str) {
    return str && str.replace(/\s/g, '-', str).toLowerCase();

  environment.addGlobal('globalTitle', 'My global title')

  manageEnv: manageEnvironment

After adding that, you can use them in template like this:

<h1>{{ globalTitle }}</h1>
<h3>{{ 'My important post'|slug }}</h3>

And get this result:

<h1>My global title</h1>


MIT © Carlos G. Limardo and Kristijan Husak


Sindre Sorhus who wrote the original gulp-nunjucks for precompiling Nunjucks templates. I updated his to render instead of precompile.

kristijanhusak for bug fixes and help with maintenance.