gulp-html-extend 創建 HTML 模板
安裝 NPM
npm install gulp-uglify --save-dev
https://www.npmjs.com/package/gulp-html-extend
使用
var extender = require('gulp-html-extend');//創建html模板
// 創建html模板
gulp.task('gohtml', function () {
gulp.src('./html/*.html')
.pipe(extender({
annotations:true,
verbose:false
})) // default options
.pipe(gulp.dest('./www'))
});
//監看
gulp.task('default', function () {
livereload.listen(); gulp.watch('./html/*.html', ['gohtml']);
});
執行
$ gulp gohtml
[17:31:07] Using gulpfile ~/gulpfile.js
[17:31:07] Starting 'gohtml'...
[17:31:07] Finished 'gohtml' after 12 ms
使用教學
設置樣板 [/layout/layout.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- @@include common/header.html -->
<!-- @@placeholder=content -->
<!-- @@include common/footer.html -->
</body>
</html>
設定頁頭 [/common/header.html]
<header>
<h1>這是頁頭</h1>
</header>
設定頁尾 [/common/footer.html]
<footer>
<p>Copyright © 徐桃花 Corporation. all rights reserved.</p>
</footer>
首頁製作 [index.html]
<!-- @@master /layout/layout.html -->
<!-- @@block content -->
可新增內容區
<!-- @@close -->