HTML templates at frontend

在近代的網路框架，HTML 可以被切分為許多小頁面，這樣維護起來的話會比較方便、同時也能少寫很多很多的 HTML 程式碼、要擴展起來也會輕而易舉。
Rails 靠 .erb 完成、Laravel 則有 .blade 來完成功能。

但這些都是後端框架才有的功能。那麼，純前端有沒有這樣的功能呢？
幸運的是有，它就是靠 gulp 完成的 gulp-html-extend。

首先把 gulp 安裝起來，接著寫好任務：

var gulp = require('gulp')
var extender = require('gulp-html-extend')
 
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'])
})

意思很明白，就是任何 HTML 被修改的時候，會啟動 html-extend 程式，把編譯後的結果放到 output 目錄。

要切分 HTML 的話有兩種辦法：

用  把需要的 HTML 放進去，gulp 接著就會按照指引，引入指定的 HTML 檔案。
用  把一段稱作 footer 的區域空出來，接著在子頁面引入  的母頁面，再來把 footer 區域用  標出來，並寫入需要的內容。最後，用  完成這個段落。

就這樣！
對了，操作手冊有點難懂，請仔細閱讀。