Compiles html to JavaScript

npm install grunt-html-convert
1 downloads in the last day
6 downloads in the last week
39 downloads in the last month


Converts html templates to JavaScript

This is a fork of the html2js repo, the original grunt task converts html to angular modules. This fork convert html to vanilla javascript.

Getting Started

This plugin requires Grunt ~0.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-html-convert --save-dev

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


The "htmlConvert" task


This plugin converts a group of html files to JavaScript and assembles them into an vanilla javascript.

Note that this plugin does not compile the templates. It simply caches the template source code.


  htmlConvert: {
    options: {
      // custom options, see below    
    mytemplate: {
      src: ['src/**/*.tpl.html'],
      dest: 'tmp/templates.js'


var mytemplate = {};
mytemplate['tile-item.tpl.html'] = '<div data-id="{{}}">\n' +
    '    {{data.title}}\n' +
    '    <img data-src="{{data.img}}" />\n' +
    '    <button data-click="remove()"></button>\n' +

Note that you should use relative paths to specify the template URL, to match the keys by which the template source is cached.


The dest property must be a string. If it is an array, Grunt will fail when attempting to write the bundle file.



Type: String Default value: 'src'

The prefix relative to the project directory that should be stripped from each template path to produce a module identifier for the template. For example, a template located at src/projects/projects.tpl.html would be identified as just projects/projects.tpl.html.

Type: String Default value: 'js'

Language of the output file. Possible values: 'coffee', 'js'.


Type: String Default value: the task name


Type: Function Default value: none

A function that takes in the module identifier and returns the renamed module identifier to use instead for the template. For example, a template located at src/projects/projects.tpl.html would be identified as /src/projects/projects.tpl with a rename function defined as:

function (moduleName) {
  return '/' + moduleName.replace('.html', '');


Type: Character Default value: "

Strings are quoted with double-quotes by default. However, for projects that want strict single quote-only usage, you can specify:

options: { quoteChar: '\'' }

to use single quotes, or any other odd quoting character you want


Type: String Default value:

By default a tab indent is used for the generated code. However, you can specify alternate indenting via:

options: { indentString: '    ' }


Type: String Default value: ``

By default there's global indentation. However, if all the generated code must indented, you can specify it via:

options: { indentGlobal: '    ' }


Type: String Default value: ``

If specified, this string will get written at the top of the output Template.js file. As an example, jshint directives such as / global soma: false / can be put at the head of the file.

Usage Examples

See the Gruntfile.js in the project source code for various configuration examples.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

0.0.1 convert the angular grunt task to vanilla javascript

npm loves you