Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

grunt-template

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

Subscribe to updates I use grunt-template


Statistics on grunt-template

Number of watchers on Github 136
Number of open issues 8
Average time to close an issue 1 day
Main language JavaScript
Open pull requests 3+
Closed pull requests 4+
Last commit almost 4 years ago
Repo Created almost 7 years ago
Repo Last Updated over 2 years ago
Size 33 KB
Homepage http://git.io/gru...
Organization / Authormathiasbynens
Contributors3
Page Updated
Do you use grunt-template? Leave a review!
View open issues (8)
View grunt-template activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating grunt-template for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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 doesnt have any dependencies (other than Grunt itself).

Getting started

This plugin requires Grunt v0.4.0+.

If you havent 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 youre 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 projects 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-Dashs _.template() method. Heres 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 youre generating an HTML file and youre using unknown input data.

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

Usage example

Heres 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.

grunt-template open issues Ask a question     (View All Issues)
  • over 4 years How to create multiple templates at once?
  • almost 5 years Task vs. Target specific options [doesn't work]
  • almost 6 years permit named named variable option
  • about 6 years templating with target does not work
grunt-template open pull requests (View All Pulls)
  • Update peerDependencies to support Grunt 1.0
  • Update README.md
  • Update template.js
grunt-template questions on Stackoverflow (View All Questions)
  • How to add amd module(requirejs) as grunt-template-jasmine-requirejs helpers
  • grunt template jasmine istanbul is not generating coverage report
  • How to install grunt-template automatically
  • How do I correctly access the user's home directory from a grunt template?
  • Local Npm module "grunt-template-jasmine-istanbul" not found
  • How to provide the correct directory using grunt-template-jasmine-requirejs?
  • "Error: scripterror: Illegal path or script error" using grunt-template-jasmine-requirejs
  • Accessing the process / environment from a grunt template
  • Grunt template variables and if else
  • Update variable used by Grunt Template
  • Running a script from a Grunt template
  • Grunt-template not working as expected
  • Replacing text in Grunt Template String
  • Emberjs grunt template compiler
  • Interpolated array in Grunt template is interpreted as a string
  • Grunt-template-jasmine-istanbul missing dir error
  • Grunt template task
grunt-template list of languages used
Other projects in JavaScript