gulp-nunjucks-render

Render Nunjucks templates

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

Install

Install with npm

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

Example

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
 
gulp.task('default', function () {
  return gulp.src('src/templates/*.html')
    .pipe(nunjucksRender({
      path: ['src/templates/'] // String or Array
    }))
    .pipe(gulp.dest('dist'));
});

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')
    .pipe(data(getDataForFile))
    .pipe(nunjucksRender({
      path: 'src/templates'
    }))
    .pipe(gulp.dest('dist'));
});

API

Options

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.

Data

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" />

Environment

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')
}
 
nunjucksRender({
  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>
<h3>my-important-post</h3>

License

MIT © Carlos G. Limardo and Kristijan Husak

Shout-outs

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.