gulp-jshtml

Gulp plugin to convert passed HTML streams to Javascript

$ npm install gulp-jshtml

Usage

jshtml = require('gulp-jshtml'),
gulp.task('jshtml', function() {
	return gulp.src('src/**/*.html')
        .pipe(jshtml({
        	invoke:"templates.add"
        }))        
        .pipe(gulp.dest('dist/'))		
});

####Considerations

The plugin escapes all relevant characters in the source HTML, collapses tabs / whitespace into a single space and trims the result.

####Options invoke

(Optional) Function to invoke, passed template location and compiled HTML. Defaults to jshtml. e.g. the content of C:\MyPath\MyDirectory\MyFile.html is passed to jshtml('C:\MyPath\MyDirectory\MyFile.html', compiledHTML)

####Example

######Gulp

gulp.src('myDirectory\myFile.html', {
  .pipe(jshtml({
      invoke:"templates.add"
  }))  

######HTML (of myDirectory\myFile.html)

<div id='myDiv' class='myDiv-css'>
       Some content "here"...can be {anything}	   
</div>

######Output JS

templates.add("myDirectory/myFile.html", "<div id='myDiv' class='myDiv-css'>Some content \"here\"...can be {anything}</div>");

####Sample Use Case

The compiled index.html file when viewed will show a random number between 0-1

######index.html Includes references to main.js and templates.js

<div id='example'></div>

######main.js

Creates a central template store, and defines a method to add new templates to it. This method is used by templates.js having been defined in the gulp-jshtml task. Also applies this template to an element in index.html

var templates={};
templates.add=function(html, location){
	location = location.substr(0,location.indexOf("."));
	templates[location]=html;
}
document.getElementById('example').innerHTML=templates.template.replace("{{randomNumber}}", Math.random());

######template.html

A simple HTML template fragment

<span>{{randomNumber}}</span>

######gulp task

gulp.src('template.html', {
  .pipe(jshtml({
      invoke:"templates.add"
  }))  

######templates.js (automatically generated by gulp-jshtml):

For each template, calls the templates.add method, passing the template HTML and location

templates.add("template.html", "<span>{{randomNumber}}</span>");

gulp-jshtml, written by SW4 for use in the OpenUI project, www.ouijs.org.