gulp-template

Render/precompile Lodash/Underscore templates

Issues with the output should be reported on the Lodash issue tracker.

Install

npm install --save-dev gulp-template

Usage

src/greeting.html

<h1>Hello <%= name %></h1>

gulpfile.js

import gulp from 'gulp';
import template from 'gulp-template';

export default () => (
	gulp.src('src/greeting.html')
		.pipe(template({name: 'Sindre'}))
		.pipe(gulp.dest('dist'))
);

You can alternatively use gulp-data to inject the data:

import gulp from 'gulp';
import template from 'gulp-template';
import data from 'gulp-data';

export default () => (
	gulp.src('src/greeting.html')
		.pipe(data(() => ({name: 'Sindre'})))
		.pipe(template())
		.pipe(gulp.dest('dist'))
);

dist/greeting.html

<h1>Hello Sindre</h1>

API

template(data, options?)

Render a template using the provided data.

template.precompile(options?)

Precompile a template for rendering dynamically at a later time.

data

Type: object

Data object used to populate the text.

options

Type: object

Lodash _.template options.

Tip

You can also provide your own interpolation string for custom templates.

src/greeting.html

<h1>Hello {{ name }}</h1>

gulpfile.js

import gulp from 'gulp';
import template from 'gulp-template';
import data from 'gulp-data';

export default () => (
	gulp.src('src/greeting.html')
		.pipe(data(() => ({name: 'Sindre'})))
		.pipe(template(null, {
			interpolate: /{{(.+?)}}/gs
		}))
		.pipe(gulp.dest('dist'))
);

dist/greeting.html

<h1>Hello Sindre</h1>

Tip

If you need to pass through a file unprocessed (for example, a shell script with ${VAR} syntax), you can disable interpolation:

.pipe(template(data, {interpolate: false}))