• Stars
    star
    136
  • Rank 267,770 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This Grunt plugin interpolates template files with any data you provide and saves the result to another file.

grunt-template Build status Dependency status

This Grunt plugin interpolates template files with any data you provide and saves the result to another file.

Since grunt.template.process is used for the templating, this Grunt plugin is very lightweight and doesn’t have any dependencies (other than Grunt itself).

Getting started

This plugin requires Grunt v0.4.0+.

If you haven’t used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you’re familiar with that process, you may install this plugin with this command:

npm install grunt-template --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-template');

The template task

Overview

In your project’s Gruntfile, add a section named template to the data object passed into grunt.initConfig().

grunt.initConfig({
	'template': {
		'options': {
			// Task-specific options go here
		},
		'your-target': {
			'options': {
				// Target-specific options go here
			},
			'files': {
				// Target-specific file lists go here
			}
		}
	}
});

Options

The options property accepts the following options:

data

Type: Object or Function Default: {}

This object contains the data that will be used while interpolating the template files. If you pass a function instead, it will be called when grunt-template needs the template data (lazy evaluation). This is useful if you want to load data from a file that is generated by another Grunt task, for example.

delimiters

Type: String or Function Default: config

This is the delimiters' name that will be used to interpolate and evaluate code. A function that returns this name can be used too. This property is useful when you want to generate JSP/ERB like code and you need the default interpolation delimiters to be <% and %>. See below for an example.

Template syntax

Under the hood, grunt-template uses grunt.template.process, which in turn relies on Lo-Dash’s _.template() method. Here’s a quick reminder of the default delimiters:

  • Use <%= value %> to interpolate any values directly, i.e. inject them into the template without any modifications.
  • Use <%- value %> to interpolate an HTML-escaped version of a given value. Use this if you’re generating an HTML file and you’re using unknown input data.

For more details and examples, see the Lo-Dash’s API documentation for the _.template() method.

Usage example

Here’s a practical example of grunt-template. Here, the file src/post.html.tpl is loaded, then parsed as a template using the provided data object (with title, author and content properties), and finally the result is saved as dist/post.html.

src/post.html.tpl

<!DOCTYPE html>
<title><%- title %></title>
<h1><%- title %>, by <%- author %></h1>
<p><%- content %></p>

Gruntfile.js

module.exports = function(grunt) {
	grunt.initConfig({
		'template': {
			'process-html-template': {
				'options': {
					'data': {
						'title': 'My blog post',
						'author': 'Mathias Bynens',
						'content': 'Lorem ipsum dolor sit amet.'
					}
				},
				'files': {
					'dist/post.html': ['src/post.html.tpl']
				}
			}
		}
	});
	grunt.loadNpmTasks('grunt-template');
	grunt.registerTask('default', [
		'template'
	]);
};

dist/post.html (the end result)

<!DOCTYPE html>
<title>My blog post</title>
<h1>My blog post, by Mathias Bynens</h1>
<p>Lorem ipsum dolor sit amet.</p>

Gruntfile.js (using a custom delimiter)

module.exports = function(grunt) {
	grunt.template.addDelimiters('handlebars-like-delimiters', '{{', '}}')
	grunt.initConfig({
		'template': {
			'process-html-template': {
				'options': {
					'data': {
						'title': 'My blog post',
						'author': 'Mathias Bynens',
						'content': 'Lorem ipsum dolor sit amet.'
					},
					'delimiters': 'handlebars-like-delimiters'
				},
				'files': {
					'dist/post.html': ['src/post.html.tpl']
				}
			}
		}
	});
	grunt.loadNpmTasks('grunt-template');
	grunt.registerTask('default', [
		'template'
	]);
};

src/post.html.tpl (using a custom delimiter)

<!DOCTYPE html>
<title>{{- title }}</title>
<h1>{{- title }}, by {{- author }}</h1>
<p>{{- content }}</p>

Notes

If you use gulp instead of Grunt, but want to perform a similar task, use gulp-template.

Author

twitter/mathias
Mathias Bynens

License

grunt-template is available under the MIT license.

More Repositories

1

dotfiles

🔧 .files, including ~/.macos — sensible hacker defaults for macOS
Shell
29,301
star
2

jquery-placeholder

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
JavaScript
3,983
star
3

he

A robust HTML entity encoder/decoder written in JavaScript.
JavaScript
3,289
star
4

evil.sh

🙊 Subtle and not-so-subtle shell tweaks that will slowly drive people insane.
Shell
2,159
star
5

small

Smallest possible syntactically valid files of different types
HTML
1,900
star
6

emoji-regex

A regular expression to match all Emoji-only symbols as per the Unicode Standard.
JavaScript
1,641
star
7

punycode.js

A robust Punycode converter that fully complies to RFC 3492 and RFC 5891.
JavaScript
1,479
star
8

mothereff.in

Web developer tools
JavaScript
1,024
star
9

esrever

A Unicode-aware string reverser written in JavaScript.
JavaScript
878
star
10

jsesc

Given some data, jsesc returns the shortest possible stringified & ASCII-safe representation of that data.
JavaScript
683
star
11

utf8.js

A robust JavaScript implementation of a UTF-8 encoder/decoder, as defined by the Encoding Standard.
JavaScript
539
star
12

base64

A robust base64 encoder/decoder that is fully compatible with `atob()` and btoa()`, written in JavaScript.
JavaScript
491
star
13

CSS.escape

A robust polyfill for the CSS.escape utility method as defined in CSSOM.
JavaScript
486
star
14

jsperf.com

jsPerf.com source code
JavaScript
473
star
15

regenerate

Generate JavaScript-compatible regular expressions based on a given set of Unicode symbols or code points.
JavaScript
353
star
16

php-url-shortener

Simple PHP URL shortener, as used on mths.be
PHP
334
star
17

regexpu

A source code transpiler that enables the use of ES2015 Unicode regular expressions in ES5.
JavaScript
226
star
18

tpyo

A small script that enables you to make typos in JavaScript property names. Powered by ES2015 proxies + Levenshtein string distance.
JavaScript
205
star
19

luamin

A Lua minifier written in JavaScript
JavaScript
188
star
20

cssesc

A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
HTML
150
star
21

String.prototype.startsWith

A robust & optimized ES3-compatible polyfill for the `String.prototype.startsWith` method in ECMAScript 6.
JavaScript
143
star
22

document.scrollingElement

A polyfill for document.scrollingElement as defined in the CSSOM specification.
JavaScript
131
star
23

jquery-visibility

Page Visibility shim for jQuery
JavaScript
129
star
24

jquery-details

World’s first <details>/<summary> polyfill™
HTML
121
star
25

rel-noopener

Quick demonstration of why `<a rel=noopener>` is needed.
HTML
114
star
26

quoted-printable

A robust & character encoding–agnostic JavaScript implementation of the `Quoted-Printable` content transfer encoding as defined by RFC 2045.
JavaScript
88
star
27

grunt-zopfli

A Grunt plugin for compressing files using Zopfli.
JavaScript
87
star
28

emoji-test-regex-pattern

A regular expression pattern for Java/JavaScript to match all emoji in the emoji-test.txt file provided by UTS#51.
JavaScript
79
star
29

jquery-smooth-scrolling

Smooth anchor scrolling plugin for jQuery.
JavaScript
73
star
30

String.prototype.includes

A robust & optimized ES3-compatible polyfill for the `String.prototype.contains` method in ECMAScript 6.
JavaScript
69
star
31

Array.from

A robust & optimized ES3-compatible polyfill for the `Array.from` method in ECMAScript 6.
JavaScript
66
star
32

regexpu-core

regexpu’s core functionality, i.e. `rewritePattern(pattern, flag, options)`, which enables rewriting regular expressions that make use of the ES6 `u` flag into equivalent ES5-compatible regular expression patterns.
JavaScript
63
star
33

jquery-slideshow

The simplest jQuery slideshow plugin. Evar.
JavaScript
61
star
34

String.fromCodePoint

A robust & optimized `String.fromCodePoint` polyfill, based on the ECMAScript 6 specification.
JavaScript
61
star
35

hashtag-regex

A regular expression to match hashtag identifiers as per the Unicode Standard.
JavaScript
60
star
36

custom.keylayout

Custom QWERTY/AZERTY .keylayout files for use with Apple keyboards
59
star
37

unicode-data

Python scripts that generate JavaScript-compatible Unicode data
JavaScript
59
star
38

grunt-yui-compressor

A Grunt plugin for compressing JavaScript and CSS files using YUI Compressor.
JavaScript
59
star
39

String.prototype.at

A robust & optimized ES3-compatible polyfill for the `String.prototype.at` proposal for ECMAScript 6/7.
JavaScript
55
star
40

String.prototype.codePointAt

A robust & optimized `String.prototype.codePointAt` polyfill, based on the ECMAScript 6 specification.
JavaScript
55
star
41

covid-19-vaccinations-germany

Historical data on COVID-19 vaccination doses administered in Germany, per state.
HTML
54
star
42

windows-1252

A robust JavaScript implementation of the windows-1252 character encoding as defined by the Encoding Standard.
JavaScript
44
star
43

flag-emoji-replacements

'🇩🇰🇲🇬'.replace('🇰🇲', '🇪🇨'); // → '🇩🇪🇨🇬'
JavaScript
38
star
44

unicode-tr51

Emoji data extracted from Unicode Technical Report #51.
JavaScript
38
star
45

String.prototype.endsWith

A robust & optimized ES3-compatible polyfill for the `String.prototype.endsWith` method in ECMAScript 6.
JavaScript
35
star
46

wtf-8

A well-tested WTF-8 encoder/decoder written in JavaScript.
JavaScript
34
star
47

caniunicode

Unicode version support across JavaScript features & engines
JavaScript
32
star
48

math-tex

A web component for mathematical typesetting using TeX notation.
HTML
27
star
49

jquery-noselect

A jQuery plugin which disables text selection on any element. Useful for UI elements; evil for pretty much everything else.
JavaScript
27
star
50

String.prototype.repeat

A robust & optimized ES3-compatible polyfill for the `String.prototype.repeat` method in ECMAScript 6.
JavaScript
27
star
51

windows-1251

A robust JavaScript implementation of the windows-1251 character encoding as defined by the Encoding Standard.
JavaScript
26
star
52

kali-linux-docker

Kali Linux Docker
Shell
26
star
53

bacon-cipher

A robust JavaScript implementation of Bacon’s cipher, a.k.a. the Baconian cipher.
JavaScript
24
star
54

jquery-custom-data-attributes

An easy setter/getter for HTML5 data-* attributes
JavaScript
21
star
55

rgi-emoji-regex-pattern

A JavaScript-compatible regular expression pattern to match all RGI emoji symbols and sequences as per the Unicode Standard and UTS#51.
JavaScript
21
star
56

q-encoding

A robust & character encoding–agnostic JavaScript implementation of the `Q` encoding as defined by RFC 2047.
JavaScript
20
star
57

babel-plugin-transform-unicode-property-regex

Compile Unicode property escapes in Unicode regular expressions to ES5 or ES6 that works in today’s environments.
JavaScript
19
star
58

regenerate-unicode-properties

A collection of Regenerate sets for Unicode various properties.
JavaScript
17
star
59

rot

Perform simple rotational letter substitution (such as ROT-13) in JavaScript.
JavaScript
17
star
60

regex-trie-cli

Create regular expression patterns based on a list of strings to be matched.
JavaScript
17
star
61

strip-combining-marks

Easily remove Unicode combining marks from strings.
JavaScript
16
star
62

Array.of

A robust & optimized ES3-compatible polyfill for the `Array.of` method in ECMAScript 6.
JavaScript
15
star
63

jquery-oninput

My `oninput` polyfill as a jQuery plugin
JavaScript
14
star
64

homebrew-ecmascript

Homebrew formulae for ECMAScript engines
Ruby
13
star
65

tibia.com-extension

User script that enhances the character info pages on Tibia.com.
HTML
13
star
66

is-ascii-safe

is-ascii-safe determines whether a given string is ASCII-safe, i.e. if it consists of ASCII characters (U+0000 to U+007F) only.
JavaScript
13
star
67

es-regexp-unicode-character-class-escapes

Proposal to improve the character class escape tokens `\d`, `\D`, `\w`, `\W`, and the word boundary assertions `\b` and `\B` in ES6 Unicode regular expressions (with the `u` flag).
12
star
68

unicode-canonical-property-names-ecmascript

The set of canonical Unicode property names supported in ECMAScript RegExp property escapes.
JavaScript
11
star
69

node-unshorten

URL unshortener for Node.js
JavaScript
11
star
70

RegExp.prototype.match

A robust & optimized ES3-compatible polyfill for the `RegExp.prototype.match` method in ECMAScript 6.
JavaScript
10
star
71

is-potential-custom-element-name

Check whether a given string matches the `PotentialCustomElementName` production as defined in the HTML Standard.
JavaScript
10
star
72

atom-blackboard

TextMate’s Blackboard theme, ported to Atom.
CSS
10
star
73

unicode-emoji-modifier-base

The set of Unicode symbols that can serve as a base for emoji modifiers, i.e. those with the `Emoji_Modifier_Base` property set to `Yes`.
JavaScript
9
star
74

strip-variation-selectors

Remove Unicode variation selectors from strings.
JavaScript
9
star
75

nginx-zopfli-test

This repository contains some files that make it easy to test whether Nginx is correctly serving Zopfli-pre-compressed files.
JavaScript
9
star
76

unicode-property-escapes-tests

Tests for RegExp Unicode property escapes
JavaScript
8
star
77

unicode-match-property-value-ecmascript

Match a Unicode property or property alias to its canonical property name per the algorithm used for RegExp Unicode property escapes in ECMAScript.
JavaScript
8
star
78

grunt-esmangle

A Grunt plugin for mangling or minifying JavaScript files using Esmangle.
JavaScript
8
star
79

unicode-property-value-aliases

Unicode property value alias mappings in JavaScript format.
JavaScript
7
star
80

css-dbg-stories

HTML
7
star
81

unicode-property-aliases-ecmascript

Unicode property alias mappings in JavaScript format for property names that are supported in ECMAScript RegExp property escapes.
JavaScript
7
star
82

unicode-property-aliases

Unicode property alias mappings in JavaScript format.
JavaScript
7
star
83

unicode-match-property-ecmascript

Match a given Unicode property or property alias to its canonical property name per the algorithm used for RegExp Unicode property escapes in ECMAScript.
JavaScript
7
star
84

iso-8859-2

A robust JavaScript implementation of the iso-8859-2 character encoding as defined by the Encoding Standard.
JavaScript
6
star
85

string-prototype-replace-regexp-benchmark

Generated JavaScript benchmarks for String.prototype.{replace,replaceAll} with global regular expressions based on emoji-test-regex-pattern.
JavaScript
6
star
86

idn-allowed-code-points-regex

A regular expression that matches any of the code points that Verisign allows by default in IDN.
JavaScript
6
star
87

pogotransfercalc

Easily calculate how many Pokémon you should transfer before kicking off an evolution spree in Pokémon GO.
Python
6
star
88

macintosh

A robust JavaScript implementation of the macintosh character encoding as defined by the Encoding Standard.
JavaScript
6
star
89

windows-874

A robust JavaScript implementation of the windows-874 character encoding as defined by the Encoding Standard.
JavaScript
5
star
90

swapcase

A letter case swapper with full Unicode support, i.e. based on the official Unicode case folding mappings.
JavaScript
5
star
91

RegExp.prototype.search

A robust & optimized ES3-compatible polyfill for the `RegExp.prototype.search` method in ECMAScript 6.
JavaScript
5
star
92

WebFundamentals

Best practices for modern web development
HTML
4
star
93

netlify-test

HTML
4
star
94

pogocpm2level

Easily calculate the level of a given Pokémon in Pokémon GO based on its total CP multiplier value.
Python
4
star
95

tibia-bosses

JavaScript
4
star
96

covid-19-vaccinations-munich

Archive of historical coronavirus data for Munich, Germany
HTML
4
star
97

windows-1250

A robust JavaScript implementation of the windows-1250 character encoding as defined by the Encoding Standard.
JavaScript
4
star
98

stack-exchange-logos

Stack Exchange logos in SVG format.
HTML
4
star
99

gulp-regexpu

Gulp plugin to transpile ES6 Unicode regular expressions to ES5 with regexpu.
JavaScript
4
star
100

is-ascii-safe-cli

is-ascii-safe-cli checks whether a given file (or list of files) is ASCII-safe, i.e. consisting of ASCII characters (U+0000 to U+007F) only.
JavaScript
4
star