@naourass/gulp-html-engine NPM

gulp-html-engine

Make it easy to extend, include and replace your html files

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>

Features

Nested extending
Nested including

Install

$ npm install --save-dev gulp-html-engine

Syntax

@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

Usage

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'])
})

...