Skip to content
[Gulp]( plugin to render [Nunjucks]( templates
Branch: master
Clone or download
Pull request Compare This branch is 3 commits behind carlosl:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.