gulp-tag-include-html's Introduction

gulp-tag-include-html

is a gulp plugin,used to include html.

github: https://github.com/nickham-su/gulp-tag-include-html

feature

Using the <include> tag that include the HTML fragment in other files;
Using the doT.js template engine, rendering include content;
Using the tag attributes and child elements, two ways to transfer data;
doT.js document：http://olado.github.io/doT/

install

npm install gulp-tag-include-html

example

gulpfile.js

var gulp = require('gulp');
var include = require('gulp-tag-include-html');
gulp.task('default', function() {
    gulp.src('./views/index.html')
      .pipe(include())
	    .pipe(include({
        begin:'<%',
        end:'%>'
      }))
      .pipe(gulp.dest('dest'));
});

/views/index.html

<include src="./partials/head.html" title="home">
  <link rel="stylesheet" href="1.css">
  <link rel="stylesheet" href="2.css">
</include>
<div><h1>this is body</h1></div>
<include src="./partials/footer.html" js="['1.js','2.js']" />

/views/partials/head.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{=it.title}}</title>
  {{=it.children}}
</head>
<body>

/views/partials/footer.html

<h2>this is footer</h2>
{{~it.js:item:index}}
  <script src="{{=item}}"></script>
{{~}}
</body>
</html>

result: /dest/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>home</title>
  <link rel="stylesheet" href="1.css">
  <link rel="stylesheet" href="2.css">
</head>
<body>
<div><h1>this is body</h1></div>
<h2>this is footer</h2>

  <script src="1.js"></script>

  <script src="2.js"></script>

</body>
</html>

Author

nickham-su Email:[email protected]

Thank you

gulp-tag-include-html's People

Contributors

Stargazers

gulp-tag-include-html's Issues

Problem with nested include tag

There is a problem with nested tags.

<include src="_layout.html" style_file="cases_list">
    <div class="container">
        <h3>My Title</h3>
        <include src="_component.html"></include>
    </div>
</include>

So it doesn't parse "<include src="_component.html"></include>" and leave it as it.
Also, it breaks markdown.

Problem with regular expression, I guess. It finds the first closing tag and work with it's content.

So it sees it like

<include src="_layout.html" style_file="cases_list">
    <div class="container">
        <h3>My Title</h3>
        <include src="_component.html"></include>

I don't know how to fix it, but probably better to use html parser instead of regular expression.

Recommend Projects