Skip to content
[Gulp](https://github.com/wearefractal/gulp) plugin to render [Nunjucks](http://mozilla.github.io/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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
CHANGELOG.md
index.js
package.json
readme.md

readme.md

Build Status

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.

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.