gulp-html-tag-include

Gulp plugin for building HTML files into each other

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-html-tag-include
1.0.19 years ago9 years agoMinified + gzip package size for gulp-html-tag-include in KB

Readme

gulp-html-tag-include
Gulp plugin for building HTML files into each other.

Usage

Install

```bash 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: ```javascript 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 ```html @@label: @@content ``` Results ```html Lorem ipsum dolor sit amet: ```

Example 2

index.html ```html ``` header.html ```html
<meta charset="UTF-8">
<title>@@title</title>
``` tabs.html ```html
<include src="tabs-nav.html"></include>
<include src="tabs-panels.html"></include>
``` tabs-nav.html ```html
    <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>
``` tabs-nav-item.html ```html
  • @@caption
  • ``` tabs-panels.html ```html
    <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>
    ``` tabs-panel.html ```html
    @@content
    ``` footer.html ```html ``` Results ```html
    <meta charset="UTF-8">
    <title>Example include</title>
    <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>
    ```

    License

    MIT License