Gulp plugin for building HTML files into each other.
npm install --save-dev gulp-html-tag-include- options - type:
object- tagName:
string, defaultinclude - autoIndent:
boolean, defaulttrue - prefixVar:
string, default@@
- tagName:
Then, add it to your gulpfile.js:
var gulp = require('gulp'),
include = require('gulp-html-tag-include');
gulp.task('html-include', function() {
return gulp.src('./source/index.html')
.pipe(include())
.pipe(gulp.dest('./build/'));
});
gulp.task('watch', ['html-include'], function() {
gulp.watch('./source/**/*.html', ['html-include']);
});
gulp.task('default', ['watch']);This is the simplest use case. Simply put the following html tag
<include src="filename.html" [varname="string"]>[content]</include>
<include src="filename.html" label="Lorem ipsum dolor sit amet"><input type="text" /></include>
filename.html
<label>@@label: @@content</label>Results
<label>Lorem ipsum dolor sit amet: <input type="text" /></label>index.html
<include src="header.html" title="Example include"></include>
<include src="tabs.html"></include>
<include src="footer.html"></include>header.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>@@title</title>
</head>
<body>tabs.html
<div class="tabs">
<include src="tabs-nav.html"></include>
<include src="tabs-panels.html"></include>
</div>tabs-nav.html
<ul class="tabs-nav">
<include src="tabs-nav-item.html" caption="tab 1" active="active"></include>
<include src="tabs-nav-item.html" caption="tab 2"></include>
<include src="tabs-nav-item.html" caption="tab 3"></include>
</ul>tabs-nav-item.html
<li class="@@active"><a href="#">@@caption</a></li>tabs-panels.html
<div class="tabs-panels">
<include src="tabs-panel.html"><p>content tab 1</p></include>
<include src="tabs-panel.html"><p>content tab 2</p></include>
<include src="tabs-panel.html"><p>content tab 3</p></include>
</div>tabs-panel.html
<div class="tabs-panel">@@content</div>footer.html
</body>
</html>Results
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Example include</title>
</head>
<body>
<div class="tabs">
<ul class="tabs-nav">
<li class="active"><a href="#">tab 1</a></li>
<li class=""><a href="#">tab 2</a></li>
<li class=""><a href="#">tab 3</a></li>
</ul>
<div class="tabs-panels">
<div class="tabs-panel"><p>content tab 1</p></div>
<div class="tabs-panel"><p>content tab 2</p></div>
<div class="tabs-panel"><p>content tab 3</p></div>
</div>
</div>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent