doubaokun / gulp-html-to-json

Converts HTML contents to Angular TemplateCache module or JSON object

gulp-html-to-json

Makes inclusion of files easy and fast. Generates angular module for templateCache. Compile html files and wrap it all in a single json file. Enables you to include only the files you want.

Can be useful if you want to generate various groups of templates and include only the html files you want for that specific group. Can be use in backbone and angular

Install 🚥

$ npm install gulp-html-to-json --save

Pipe

Like any other gulp plugin, transformed source files will flow onward to the destination of your choice.

In your gulpfile.js

/gulpfile.js

var gulp = require('gulp');
var htmltojson = require('gulp-html-to-json');

gulp.task('markdown', function(){
        gulp.src('path/to/your/**/*.tpl')
            .pipe(htmltojson({
                filename: "filenameyouwant" //without file extension
                , useAsVariable: true
                , isAngularTemplate : true
                , prefix : "yourprefix"
            }))
            .pipe(gulp.dest('.'))

Options

As of now, there are two options that you can use:

• filename (optional)
  • filename of the json file
• useAsVariable (optional)
  • default false
  • If set to true, it will output your file as a javascript variable. Otherwise, json file
• isAngularTemplate (optional)
  • default false
  • If set to true, it will output your file as an angular template cache.
• prefix (optional)
  • set the prefix on your angular module name

Sample outpus if useAsVariable = false;

{
    "key.name" : "<div>your html content</div>"
}

output file is filename.json

Sample output if useAsVariable = true;

var filename = {
    "key.name" : "<div>your html content</div>"
}

output file is filename.js

Sample output if isAngularTemplate = true;

    angular.module("prefix.filename").run(['$templateCache',
      function($templateCache) {
        $templateCache.put("key.name",
            // keyname.html content (escaped)
        );
        $templateCache.put("key2.name",
            // keyname2.html content (escaped)
        );
        // etc.
      }
    ]);

output file is filename.js

Usage

In the file where you want want to compile you html, add a comment similar to this:

//= key.name : relative/path/to/file.html

where key.name is the name want to associate with the html content in your json object.

If you use * as your key name like this :

//= * : relative/path/to/file.html

It will automatically use the filename of your html as its key name.

If you want to use glob similar to commonly used in GruntJS, you may also to that like this:

//= * : relative/path/to/**/*.html

Suggested key name is * so the it will use the filename as the keyname.

First sample code output:

{
    "key.name" : "<div>your html content</div>"
}

Second sample code output:

{
    "file" : "<div>your html content</div>"
}

Third sample will look into all hmtl content inside the directory and output it like this:

{
    "file" : "<div>your html content</div>"
    "file2" : "<div>your html content 2</div>"
}

---

MIT LICENSE
copyright © 2014 Scripts and Pixels.