gulp-html-ssi plugin for gulp
gulp-html-ssi allows you to compile your html files with includes.
gulp-html-ssi looks through your files for special html comments that it will use to parse them and do the include correctly.
npm install --save-dev gulp-html-ssiThen, add it to your gulpfile.js:
var gulp = require('gulp'),
includer = require('gulp-html-ssi');
gulp.task('htmlSSI', function() {
gulp.src('./source/**/*.html')
.pipe(includer())
.pipe(gulp.dest('./build/'));
});
gulp.task('default', ['htmlSSI']);
gulp.task('watch', function() {
gulp.watch(['./source/**/*.html'], function(event) {
gulp.start('default');
});
});This is the simplest use case. Simply put the following html comment
<!-- #include file="_filename" -->
or
<!-- #include virtual="_filename" -->
<!-- #include file="_filename" name="jason" job="developer"-->
<h1>{{name}}</h1>
<p>{{job}}</p><!-- #include file="_filename" truevalue="true" -->
{{?truevalue}}
<p>Render this if true</p>
{{:else}}
<p>else render this</p>
{{/truevalue}}Can either take a comma seperated string or an object
<!-- #include file="_filename" colours="red,green,blue" -->
{{#colours}}
<p>{{value}}</p>
{{/colours}}<!-- #include file="_filename" colours="[{'colour': 'red','hex':'#d0021b'},{'colour':'green','hex':'#40a22a'},{'colour':'blue','hex':'#193351'}]" -->
{{#colours}}
<p>{{colour}}: {{hex}}</p>
{{/colours}}file1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- #include file="__file2.html" -->
</body>
</html>__file2.html
hello worldResults
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>