gulp-wish

#gulp-wish

It is a gulp plugin to precompile simple templates to js files.

Install gulp-wish

npm install gulp-wish --save-dev

Creat a template hello.html

<template hello>
console.log(data);
for (var i in data){
<div class="header">
	if (data[i].hello) {
	<div class="title {{data[i].hello}}">
	} else {
	<div class="">你好</div>
	}
	{{ i }}
	</div>
</div>
}
</template hello>

Import wish and add a new gulp task

var gulp = require('gulp');
var wish = require('gulp-wish');

var path = './hello.html';

gulp.task('wish', function() {
    gulp.src(path)
        .pipe(wish())
        .pipe(gulp.dest('../'));
});

gulp.task('default', ['wish']);

Result hello.js

;(function(template){
var escapeHTML = function(str) {
return (''+str)
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/'/g, '&#39;')
.replace(/"/g, '&quot;');
};
template = template ? template : window.wish = {};
template['hello'] = function(__obj){
for ( var key in __obj ){
eval("var " + key + " = + __obj['" + key + "']");
}
var __template = [];
console.log(data);
for (var i in data){
__template.push('<div class="header">');
if (data[i].hello) {
__template.push('<div class="title ');
__template.push(escapeHTML(data[i].hello));
__template.push('">');
} else {
__template.push('<div class=\'\'>你好</div>');
}
__template.push(escapeHTML(i ));
__template.push('</div>');
__template.push('</div>');
}
return __template.join("");
}
})(window.wish);

You could use it like this

$('body').html(wish.hello({data: [{hello: 'Wish'}]}));