grunt-html-convert

Compiles html to JavaScript

grunt-html-convert

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.

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:

grunt.loadNpmTasks('grunt-html-convert');

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.

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

Result:

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

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.

Type: RegExp Default value: ``

If specified, the regular expression match will not be escaped. Also note the regular expression requires the global match flag to be set:

options: { ignore: //g } 

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.

0.0.1 convert the angular grunt task to vanilla javascript