https://github.com/sindresorhus/gulp-template
Render/precompile Lodash templates
https://github.com/sindresorhus/gulp-template
gulp-plugin javascript lodash nodejs template underscore
Last synced: 2 months ago
JSON representation
Render/precompile Lodash templates
- Host: GitHub
- URL: https://github.com/sindresorhus/gulp-template
- Owner: sindresorhus
- License: mit
- Created: 2013-12-15T16:42:04.000Z (about 12 years ago)
- Default Branch: main
- Last Pushed: 2023-11-01T17:34:16.000Z (about 2 years ago)
- Last Synced: 2025-05-15T02:36:54.322Z (7 months ago)
- Topics: gulp-plugin, javascript, lodash, nodejs, template, underscore
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 287
- Watchers: 13
- Forks: 78
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-gulp - gulp-template - [Lodash](https://github.com/lodash/lodash) templates → JavaScript. (Plugins / Templating)
- awesome-gulp-cn - gulp-template - [Lodash ](https://github.com/lodash/lodash)模板转换成JavaScript. (插件 / 模板)
README
# gulp-template
> Render/precompile [Lodash/Underscore templates](https://lodash.com/docs#template)
*Issues with the output should be reported on the Lodash [issue tracker](https://github.com/lodash/lodash/issues).*
## Install
```sh
npm install --save-dev gulp-template
```
## Usage
### `src/greeting.html`
```erb
Hello <%= name %>
```
### `gulpfile.js`
```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](https://github.com/colynb/gulp-data) to inject the data:
```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())
.pipe(gulp.dest('dist'))
);
```
### `dist/greeting.html`
```html
Hello Sindre
```
## 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](https://lodash.com/docs#template).
## Tip
You can also provide your own [interpolation string](https://lodash.com/docs#template) for custom templates.
### `src/greeting.html`
```html
Hello {{ name }}
```
### `gulpfile.js`
```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`
```html
Hello Sindre
```
## Tip
If you need to pass through a file unprocessed (for example, a shell script with `${VAR}` syntax), you can disable interpolation:
```js
.pipe(template(data, {interpolate: false}))
```