Compiling the html templates into on single JSON file.


As a intensive client-side javascript template user, I alwasy try to find the best way to load the templates. And I found it is a very good practise that compiling the templates into on single JSON file.

You can get one single JSON file and use JSON.parse convert it into a dict. With the dict, you can easily pick up the the template you wish to render, which saves you a lot of trouble by getting html file one by one.

* tpl_str might be something looks like:
* {
*    "h2": "<h2 class="title">{{title}}!</h2>",
*     "p": "<p class="warnning">{{msg}}</p>"
* }
var tpl_str = ... // get the JSON content from some where,  
                  // either from requre.js text plugin or a AJAX call. 
var tpl = JSON.parse(tpl_str);
//render to: <h2 class="title">Hello World~!</h2> 
Mustache.render(tpl.h2, {title: 'Hello World~!'});
//render to "<p class="warnning">Alert!</p>" 
Mustache.render(tpl.p, {msg: 'Alert!'});

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-html2json

Then add this line to your project's grunt.js gruntfile:


Example Code

  html2json: {
    dist: {
       src: ['src/*.txt', 'src/*.html'],
       dest: 'dist/templates.json'

With this task, you can compile all txt and html files in src into dist/templates.json.

You might also want to trigger the compiled process by watching the file change. Append following ine in the grunt.initConfig list.

watch: {
  files: '<config:html2json.dist.src>',
  tasks: 'default'

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.1 ++ Well, it works (testcase is yet to be done). ++ JSON is pretty print by default. Later will add an option to switch.

Copyright (c) 2012 Tom Tang
Licensed under the MIT license.