layout.html
<body>
@placeholder content
@placeholder footer
</body>
content.html
@extends layout.html
@block content
<main>my content</main>
@close
@block footer
<footer>my footer</footer>
@close
output
<body>
<!-- start content -->
<main>my content</main>
<!-- end content -->
<!-- start footer -->
<footer>my footer</footer>
<!-- end footer -->
</body>
- Nested extending
- Nested including
$ npm install --save-dev gulp-html-engine
@extends [=] path [jsonString]
e.g. @master master.html {"foo":"bar"}
@placeholder [=] blockName
e.g. @placeholder footer
@include [=] path [jsonString]
e.g. @include /footer.html {"foo":"bar"}
{ variableName }
e.g. { foo }
@block [=] blockName
e.g. @block footer
@close
You must add @close
at the end of every block
var gulp = require('gulp')
var extender = require('gulp-html-engine')
gulp.task('extend', function () {
gulp.src('./*.html')
.pipe(extender({annotations:true,verbose:false})) // default options
.pipe(gulp.dest('./output'))
})
gulp.task('watch', function () {
gulp.watch(['./*.html'], ['extend'])
})
...
annotations [bool]
Make it false
if you dont want too see <!-- start foo.html -->
in output files.
verbose [bool]
Show extra info in the console.
root [string (dir path)]
To make absolute path which starts with /
works.
- 1.0.0 Initial release