gulp-html-extend で共通部分の多い複数のHTMLを生成する

index.html と main.html があって、head 要素や、ナビゲーション部分が、ほとんど共通だったりする。それぞれコピペしていると、モレが出るし、確認もだるい。というわけで、テンプレートエンジンを使って、静的に HTMLを出力したいと思い立った。

これらの HTML のコーディングは、将来的に他の人に任せることを想定している。なので、ソースも HTML で書けるほうがいい。

mustache とか doT とか見てみたんだけど、どうも、私がやりたいことはテンプレート化ではないことに気づいた。ベースのHTMLを継承/拡張したり、共通部分をインクルードしたいのだ。

gulp-html-extend というのが、よさそう。

// base.html
<div>Header</div>
<!-- @@placeholder= content -->
<div>Footer</div>

// index.html
<!-- @@master= base.html-->
<!-- @@block=content-->
<div>my content!!</div>
<!-- @@close-->

// gulpfile.js

// gulpfile.js
var gulp = require('gulp')
var extender = require('gulp-html-extend')
gulp.task('extend', function () {
['index.html', 'main.html'].forEach(function (filename, _, _) {
var path = 'src/' + filename;
gulp.src(path)
.pipe(extender({annotations:false,verbose:false}))
.pipe(gulp.dest('dest'))
});
});

// dest/index.html
<div>Header</div>
<div>my content!!</div>
<div>Footer</div>

いいじゃないか。こういうのでいいんだよ、こういうので。