$ npm install --save-dev gulp-htmlrender
<div class="main">
<%include src="layout/header.html"%>
</div><h3 class="header">Hello!</h3>var gulp = require('gulp');
var htmlrender = require('gulp-htmlrender');
gulp.task('render', function() {
return gulp.src('src/index.html', {read: false})
.pipe(htmlrender.render())
.pipe(gulp.dest('dist'));
});
gulp.task('default', function() {
gulp.watch(['src/**/*.html'], ['render']);
});<div class="main">
<h3 class="header">Hello!</h3>
</div>Glob patterns can be used to include more than one partial at once. All included files will be separated with \n delimiter.
<div class="main">
<%include src="layout/**/*.html"%>
</div>Custom tags can be defined to render more complicated content.
<body>
<%template id="tpl/some-template" src="modules/some-template.html"%>
</body><div>Some template</div>var gulp = require('gulp');
var htmlrender = require('gulp-htmlrender');
htmlrender.addTemplate('template',
'<script id="{{id}}" type="text/ng-template">'+
'<%include src="{{src}}"%>'+
'</script>');
gulp.task('render', function() {
return gulp.src('src/index.html', {read: false})
.pipe(htmlrender.render())
.pipe(gulp.dest('dist'));
});<body>
<script id="tpl/some-template" type="text/ng-template">
<div>Some template</div>
</script>
</body>Before each rendering phase, some individual partials can be decorated and pushed in the renderer cache. You can pipe custom gulp plugins directly before htmlrenderer.cache() invocation.
var gulp = require('gulp');
var htmlrender = require('gulp-htmlrender');
var removeHtmlComments = require('gulp-remove-html-comments');
gulp.task('decorate', function() {
return gulp.src('src/index.html')
.pipe(removeHtmlComments())
.pipe(htmlrender.cache());
});
gulp.task('render', ['decorate'], function() {
return gulp.src('src/index.html', {read: false})
.pipe(htmlrender.render())
.pipe(gulp.dest('dist'));
});More advanced decoration allows to render inlined variables inside of partials.
<div class="version"><%=version%></div>
<div class="timestamp"><%=timestamp%></div>var gulp = require('gulp');
var htmlrender = require('gulp-htmlrender');
gulp.task('decorate', function() {
return gulp.src('src/index.html')
.pipe(htmlrender.decorator().
.vars({
version: '2.0.1',
timestamp: function() {
return new Date().getTime()
}
}).apply())
.pipe(htmlrender.cache());
});
gulp.task('render', ['decorate'], function() {
return gulp.src('src/index.html', {read: false})
.pipe(htmlrender.render())
.pipe(gulp.dest('dist'));
});<div class="version">2.0.1</div>
<div class="timestamp">1443219469588</div>gulp.task('decorate', function() {
return gulp.src('src/index.html')
.pipe(htmlrender.decorator()
.vars({
staticVar: 'value',
dynamicVar: function() {
return 'value'
}
})
.fn(function(content) {
return '<div>' + content + '</div>';
})
.apply())
.pipe(htmlrender.cache());
});Transform functions can be defined to modify included partial before rendering.
tpl/main-view: ../layout/main.html
tpl/modal-view: ../layout/modal.html<%include src="templates.yaml" transform="yaml2html"%>htmlrender.addTransform('yaml2html', function(yamlString) {
var yamlObject = yamljs.parse(yamlString);
return _.map(yamlObject, function(tpl, id) {
return '<script id="' + id + '"><%include src="' + tpl + '"%></script>';
})
});
gulp.task('render', function() {
return gulp.src('src/index.html', {read: false})
.pipe(htmlrender.render())
.pipe(gulp.dest('dist'));
});The following content will be saved in partials cache. During rendering all includes will be resolved to referenced files.
<script id="tpl/main-view"><%include src="../layout/main.html"%></script>
<script id="tpl/modal-view"><%include src="../layout/modal.html"%></script>- Glob patterns in
srcattribute forincludetag - Transforming functions with declarative usage
- Custom templates
- Decorating partials before putting to the cache
MIT © Sebastian Kuligowski