# gulp-render-nunjucks > Render nunjucks templates with gulp Latest version **2.0.1** (published 2016-06-18) · MIT license · 0 weekly downloads ## Install ```sh npm install gulp-render-nunjucks pnpm add gulp-render-nunjucks yarn add gulp-render-nunjucks bun add gulp-render-nunjucks ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.1 | | Published | 2016-06-18 | | First published | 2015-03-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | Author | Ben Daley | | Maintainers | at0g | | Keywords | gulpplugin, nunjucks, template, render, html, data | ## Links - npm: https://www.npmjs.com/package/gulp-render-nunjucks - Repository: https://github.com/at0g/gulp-render-nunjucks - Homepage: https://github.com/at0g/gulp-render-nunjucks#readme - Issues: https://github.com/at0g/gulp-render-nunjucks/issues - npm.io page: https://npm.io/package/gulp-render-nunjucks ## Dependencies (4) - [gutil](https://npm.io/package/gutil.md) ^1.6.4 - [lodash](https://npm.io/package/lodash.md) ^3.3.1 - [through2](https://npm.io/package/through2.md) ^0.6.3 - [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.4 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 2.0.1 (latest) — 2016-06-18 - 2.0.0 — 2015-09-09 - 1.0.6 — 2015-05-12 - 1.0.5 — 2015-03-20 - 1.0.4 — 2015-03-20 - 1.0.3 — 2015-03-20 - 1.0.2 — 2015-03-06 - 1.0.1 — 2015-03-06 - 1.0.0-develop — 2015-03-06 ## README # gulp-render-nunjucks A gulp plugin to render nunjucks templates with the following features: - Render each nunjucks template from `gulp.src`, optionally with `gulp-data` and/or a shared data context - Template `file.data` (via gulp-data) through one (or more) templates to create multiple outputs - Use your preferred nunjucks version (1.x peer dependency) - 100% code coverage with a full suite of tests ## installation `npm install gulp-render-nunjucks --save-dev` While not required, `gulp-data` and `gulp-rename` are very useful with this plugin. `npm install gulp-data gulp-rename --save-dev` ## api ``` // Render gulp.src as nunjucks template(s). // Use "render" when each source file is a nunjucks template. // A simple use-case is to render a static site using nunjucks features such // as include, extends etc. require('gulp-render-nunjucks').render( [data] ); ``` ``` // Render template.njk for each file in gulp.src // Use "template" to pass the source files as data to the template. // A simple use case is a gulp.src of json, where each file should be rendered using the same // template. require('gulp-render-nunjucks').template('template.njk') ``` ## usage ### render([data]) **gulpfile.js** ``` var rename = require('gulp-rename'); var njk = require('gulp-render-nunjucks'); gulp.task('html', function(){ return gulp.src(['tpl1.njk', 'tpl2.njk']) .pipe(njk.render()) .pipe(rename({ extname: '.html' }) .pipe(gulp.dest('dest')); }); ``` **output** ``` dest/tpl1.html dest/tpl2.html ``` ### template('template-name.njk') **gulpfile.js** ``` var data = require('gulp-data'); var rename = require('gulp-rename'); var requireNew = require('require-new'); var njk = require('gulp-render-nunjucks'); gulp.task('html', function(){ return gulp.src(['data/foo.js', 'data/bar.json'], { base: 'data', read: false }) .pipe(data(function (file) { return requireNew(file.path); })) .pipe(njk.template('foobar.njk')) .pipe(rename({ extname: '.html' }) .pipe(gulp.dest('dest')); }); ``` **output** ``` dest/foo.html dest/bar.html ``` ### template(function(file){...}) **gulpfile.js** ``` var data = require('gulp-data'); var rename = require('gulp-rename'); var requireNew = require('require-new'); var njk = require('gulp-render-nunjucks'); gulp.task('html', function () { return gulp.src(['data/foo.js', 'data/bar.json'], { base: 'data', read: false }) .pipe(data(function (file) { return requireNew(file.path); })) .pipe(njk.template(function (file) { if(file.relative === 'foo.js'){ return 'preview.njk'; } return 'feature.njk'; })) .pipe(rename({ extname: '.html' }) .pipe(gulp.dest('dest')); }); ``` **output** ``` dest/foo.html // rendered using preview.njk dest/bar.html // rendered using feature.njk ``` ## notes If using gulp-data and passing a data context to render(), a merged context will be passed to the template. When merging the data, keys from `file.data` (from `gulp-data`) will overwrite the default data context passed to render(). For example: **gulpfile.js** ``` var data = require('gulp-data'); var rename = require('gulp-rename'); var njk = require('gulp-render-nunjucks'); gulp.task('html', function () { return gulp.src(['tpl1.njk', 'tpl2.njk']) .pipe(data(function (file) { return { // 1. 'message' will not be overwritten when data is merged message: 'hello from ' + file.relative } })) // 2. 'message' will be overwritten with the value from gulp-data. .pipe(njk.render({ message: 'hello')) .pipe(rename({ extname: '.html' }) .pipe(gulp.dest('dest')); }); ``` **output** ``` dest/tpl1.html // message = 'hello from tpl1.html' dest/tpl2.html // message = 'hello from tpl2.html' ``` ## tests `npm test` (or `mocha`) - Runs all tests `npm run coverage` - Check code coverage --- _Source: https://npm.io/package/gulp-render-nunjucks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._