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.}