gulp-tpl

gulp-tpl

[data(yaml/json)] + [data(gulp control)] + [filter(js)] + tpl(handlebars/ejs) -> html

1 tpl -> [1..n] html

State

Usage

Note

• data file: demo.yaml / demo.json

• filter file: demo.filter.js

• tpl file: demo.hbs / demo.ejs

• note1: base name is same demo

• note2: must *.filter.js

data + tpl -> html

• gulpfile.js

var gulp = require('gulp');
var savefile = require('gulp-savefile');
var tpl = require('gulp-tpl');

gulp.task('default', function() {
  return gulp.src('demo.hbs') // or demo.ejs/demo.filter.js/demo.yaml/demo.json
        .pipe(tpl.html())
        .pipe(savefile());
});

• demo.yaml

name: world

• demo.hbs

<div>{{name}}</div>

• output: demo.html

<div>world</div>

data + filter + tpl -> html

• gulpfile.js

var gulp = require('gulp');
var savefile = require('gulp-savefile');
var tpl = require('gulp-tpl');

gulp.task('default', function() {
  return gulp.src('demo.hbs') // or demo.ejs/demo.filter.js/demo.yaml/demo.json
        .pipe(tpl.html())
        .pipe(savefile());
});

• demo.yaml

name: world

• demo.filter.js

module.exports.filter = function(data) {
  data.name = "hello " + data.name;
  return data;
};

• demo.hbs

<div>{{name}}</div>

• output: demo.html

<div>hello world</div>

data + gulp + filter + tpl -> html

• gulpfile.js

var gulp = require('gulp');
var savefile = require('gulp-savefile');
var tpl = require('gulp-tpl');

gulp.task('default', function() {
  return gulp.src('demo.hbs') // or demo.ejs/demo.filter.js/demo.yaml/demo.json
        .pipe(tpl.html({data:{v2:"from gulp"}}))
        .pipe(savefile());
});

• demo.yaml

v1: from yaml

• demo.filter.js

module.exports.filter = function(data) {
  data.v3 = "from filter";
  return data;
};

• demo.hbs

<div>v1 {{v1}}</div>
<div>v2 {{v2}}</div>
<div>v3 {{v3}}</div>

• output: demo.html

<div>v1 from yaml</div>
<div>v2 from gulp</div>
<div>v3 from filter</div>

1 tpl -> [1..n] html

• gulpfile.js

var gulp = require('gulp');
var savefile = require('gulp-savefile');
var tpl = require('gulp-tpl');

gulp.task('default', function() {
  return gulp.src('demo.hbs') // or demo.ejs/demo.filter.js/demo.yaml/demo.json
        .pipe(tpl.html())
        .pipe(savefile());
});

• demo.filter.js

module.exports.filter = function(data) {
  datas = [];

  data.ispc = true;
  datas.push({filename:"demo_pc", data:data});

  data = JSON.parse(JSON.stringify(data))
  data.ispc = false;
  datas.push({filename:"demo_mobile", data:data});

  return datas;
};

• demo.hbs

{{#if ispc}}
<div>pc</div>
{{else}}
<div>mobile</div>
{{/if}}

• output: demo_pc.html

<div>pc</div>

• output: demo_mobile.html

<div>mobile</div>

option

• ignoreErr

ignore error, only log error msg, easy to watch and debug

var gulp = require('gulp');
var savefile = require('gulp-savefile');
var tpl = require('gulp-tpl');

gulp.task('default', function() {
  return gulp.src('demo.hbs')
        .pipe(tpl.html({ignoreErr:true}))
        .pipe(savefile());
});

Test

• npm test
• examples ./test

License

MIT License