gulp-nunjucks-render

    2.2.3 • Public • Published

    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.

    Install

    npm i gulp-nunjucks-render

    DownloadsWeekly Downloads

    7,420

    Version

    2.2.3

    License

    MIT

    Unpacked Size

    8.15 kB

    Total Files

    4

    Last publish

    Collaborators

    • carlosl
    • kristijanhusak