Gulp-html-tag-include NPM

gulp-html-tag-include

Gulp plugin for building HTML files into each other.

Usage

Install

npm install --save-dev gulp-html-tag-include

options

options - type: object
- tagName: string, default include
- autoIndent: boolean, default true
- prefixVar: string, default @@

Sample `gulpfile.js`

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']);

Include

This is the simplest use case. Simply put the following html tag

<include src="filename.html" [varname="string"]>[content]</include>

Example 1

<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>

Example 2

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>