0.0.7 • Published 9 years ago
gulp-wish v0.0.7
#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, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"');
};
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'}]}));