Gulp 學習 5 - 建立 HTML 模板
這個部落格經營了快一年，都是利用 fire.app 替我建置「純靜態」的 blog，換句話說，其實我只是撰寫內容，然後藉由 fire.app 幫我把內容和 layout 合併在一起，如果有興趣的人可以直接購買 fire.app 下來使用即可。不過這一篇並不是要介紹 fire.app，而是要利用 gulp，建立 HTML 的模板，同樣也是將 layout 和 content 分開，然後在預覽與上線的時候再合併。
安裝套件
這裡我們要用到的是 gulp-html-extend 這個套件 ( 參考 gulp-html-extend )，和之前介紹過的 gulp-html-replace 類似，gulp-html-extend 會把某些特定註解內的內容置換為我們想要的內容，但與 gulp-html-replace 不同的地方，在於 gulp-html-replace 要置換的內容寫在 gulpfile.js 裏頭，而 gulp-html-extend 則是將外部的 HTML 內容嵌入註解的區域。
以下面的例子來說，首先我們建立一個 layout.html 的樣版，裡頭是要共用的內容，在裡面可以看到有兩個註解，分別是<!-- @ @ placeholder= title -->和<!-- @ @ placeholder= content -->，這就是我們要合併的部分。( 因為兩個 @ 會被 markdown 用消失，所以這邊中間有空格 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- @ @ placeholder= title -->
</head>
<body>
<!-- @ @ placeholder= content -->
<footer>
footer
</footer>
</body>
</html>
接著看到要和 layout.html 合併的頁面，分別是 index.html 和 index2.html，裏頭用註解區塊很清楚的標示哪裡是 title ，哪裡是 content，屆時合併之後，index.html 和 index2.html 就會具備相同的 layout了。
未合併的 index.html
<!-- @ @ master = ../layout.html-->
<!-- @ @ block = title-->
<title>index</title>
<!-- @ @ close-->
<!-- @ @ block = content-->
<main>
我是 index
</main>
<!-- @ @close-->
未合併的 index2.html
<!-- @ @master = ../layout.html-->
<!-- @ @block = title-->
<title>index2</title>
<!-- @ @close-->
<!-- @ @block = content-->
<main>
我是 index2
</main>
<!-- @ @close-->
合併之後就會變成這樣：
合併的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<main>
我是 index
</main>
<footer>
footer
</footer>
</body>
</html>
合併的 index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index2</title>
</head>
<body>
<main>
我是 index2
</main>
<footer>
footer
</footer>
</body>
</html>
撰寫 gulpfile.js
看完 html 是如何進行合併，再來就是 gulpfile.js 要怎麼寫呢？一開始同樣是要引入套件，然後建立名為 extend 的任務，src 設定目標資料夾內的 html 檔案，然後設定 ( verbose 設定為 false 就可以在合併之後把註解移除 )
var gulp = require('gulp'),
extender = require('gulp-html-extend');
gulp.task('extend', function () {
gulp.src('./app/dist/*.html')
.pipe(extender({annotations:false,verbose:false})) // default options
.pipe(gulp.dest('./app/preview/'));
});
gulp.task('default',['extend']);
以上就是利用 Gulp 建立 HTML 模板的方法，下圖是整個 HTML 的資料夾結構。
