gulp-jshtml v0.0.13
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.