❤
npm
Sign UpSign In

gulp-include-template

0.2.3 • Public • Published

gulp-include-template Build Status

NPM

This is a gulp plugin to extend artTemplate include function replacing <% include() %> with compiled functions. In 0.1.0 version, we add includeNative to include native html but not compiled html. The syntax is the same with include but without passing a data object.

Usage

html/hello.html

<!doctype html>
<body>
<% var data = { "hello": "world" }; %>
<% include('header.html', data); %>
<% include('footer.html', data); %>
</body>
</html>

html/header.html

<header><%= hello %></header>

html/footer.html

<footer><%= hello %></footer>
var gulp = require("gulp"),
    gulpIncludeTemplate = require("gulp-include-template");
 
 
gulp.task("includeTemplate", function() {
 
    return gulp.src("../html/hello.html")
        // options is optional
        .pipe(gulpIncludeTemplate())
        .pipe(gulp.dest("./compiled"));
});

After running the includeTemplate task:

compiled/hello.html

<!DOCTYPE html>
<html>
<body>
<% var data = { "hello": "world" }; %>
 <% (function($$data) {%>
 <% var hello=$$data.hello; %>
<header><%= hello %></header>
 <% })( data); %>
 <% (function($$data) {%>
 <% var hello=$$data.hello; %>
<footer><%= hello %></footer>
 <% })( data); %>
</body>
</html>

Set the base

If we want to refer to the js/css with the absolute url starts with '/', you should set the base attribute of gulp-include-template.

var gulp = require("gulp"),
    gulpIncludeTemplate = require("gulp-include-template");
 
// if we set the base of gulp-include-template, we can access them the absolute url starts with '/'
gulpIncludeTemplate.config('base', 'path/to/html');
gulp.task("includeTemplate", function() {
 
    return gulp.src("../html/hello.html")
        // options is optional
        .pipe(gulpIncludeTemplate())
        .pipe(gulp.dest("./compiled"));
});

Html is like this.

<!doctype html>
<body>
<% var data = { "hello": "world" }; %>
<% include('/dirUnderPathToHtml/header.html', data); %>
<% include('/dirUnderPathToHtml/footer.html', data); %>
</body>
</html>

The compiled hello.html can be directly used by the artTemplate without loading the outer html in running time.

Release log

  1. 0.1.0 add includeNative to just include original content to template.

Readme

Keywords

none

Package Sidebar

Install

npm i gulp-include-template

Weekly Downloads

25

Version

0.2.3

License

none

Last publish

Collaborators

  • git-patrickliu
Try on RunKit
Report malware