<header>, <nav>, <footer>같은 공통적으로 사용 태그나 내용을 .html파일마다 다 넣지 않아도 사용하려는(예: header.html) 한 파일을 만들어 모든 페이지에 호출하여 사용할 수 있다.
gulp 플러그인 중에 gulp-html-tag-include를 사용해보려고 한다.

설치하기

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

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('./dist/'));
});
 
gulp.task('watch', ['html-include'], function() {
    gulp.watch('./source/**/*.html', ['html-include']);
});
 
gulp.task('default', ['watch']);

include 사용방법

간단한 사용방법은 다음과 같다.

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

예제1

<include src="filename.html" label="이름: "><input type="text" /></include>

filename.html

<label>@@label: @@content</label>

Result:

<label>이름: <input type="text" /></label>

예제2

index.html

<include src="header.html" title="include 예제"></include>
<include src="tabs.html"></include>
<include src="footer.html"></include>

header.html

<!DOCTYPE html>
<html>
<head lang="ko">
    <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>

실행해보면 다음과 같이 출력이 된다.
Result:

<!DOCTYPE html>
<html>
<head lang="ko">
    <meta charset="UTF-8">
    <title>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>

 

그 외 include 플로그인

입맛에 맞게 사용하면 될거 같다.^^;