Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 76 lines (59 sloc) 2.258 kb

grunt-html2json

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!'});

Getting Started

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:

grunt.loadNpmTasks('grunt-html2json');

Documentation

Example Code

grunt.initConfig({
  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'
}

Contributing

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

License

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

Something went wrong with that request. Please try again.