Render Nunjucks templates with data

Downloads in past


2.2.35 years ago10 years agoMinified + gzip package size for gulp-nunjucks-render in KB


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 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: ''

For the following template
<link rel="stylesheet" href="{{ css_path }}test.css" />

Would render
<link rel="stylesheet" href="" />


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.