gulp-tag-include
html页面之间的相互引用
Last updated 5 years ago by rodey .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gulp-tag-include 
SYNC missed versions from official npm registry.

Features

  • HTML页面中引入其他页面
  • 引入时可带参数
  • 递归引入

Usage

var gulp = require('gulp');
var htmlIncluder = require('gulp-tag-include');

gulp.task('build.html', function(){

    gulp.src('src/build.html')
        .pipe(htmlIncluder())
        .pipe(gulp.dest('dist'));

});

Html


    <!-- 引入尾部(标签内属性) -->
    <include src="assets/layout/header.html">
        @title      = gulp-html-includer,
        @css        = assets/css/a.css,
        @charset    = utf-8
    </include>

    <p>build</p>

    <!-- 引入尾部 -->
    <include src="assets/layout/footer"></include>
+ 也支持直接将变量作为标签属性的形式:
    <!-- 引入头部(标签上属性) -->
    <include src="assets/layout/header.html" title="gulp-html-includer" css="assets/css/a.css" charset="utf-8"></include>

    <p>build</p>

    <!-- 引入尾部 -->
    <include src="assets/layout/footer"></include>

  • 同时支持后台模版式:

    <!-- 引入头部(标签上属性) -->
    @include("assets/layout/header.html", {title: "gulp-html-includer", css: "assets/css/a.css", charset: "utf-8"} )

header.html


    <html>
    <head lang="en">
        <title>{{ title }}</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="{{ css }}" charset="{{ charset }}"/>
    </head>
    <body>

footer.html

    </body>
    </html>

output:


    <html>
    <head lang="en">
        <title>gulp-html-includer</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="assets/css/a.css" charset="utf-8"/>
    </head>
    <body>
        <p>build</p>
    </body>
    </html>

Options


gulp.task('build.html', function(){

    gulp.src('src/build.html')
        .pipe(htmlIncluder({
            //匹配引入标签名
            tagName: 'require_once',
            //处理标签上的属性参数传递,默认 true
            tagAttr: true,
            //处理标签内容中的参数传递,默认 true
            tagContent: true
        }))
        .pipe(gulp.dest('dist'));

});

//gulp.task('default', ['build.html']);

Alt text Alt text Alt text Alt text Alt text

#options + tagName; (匹配引入标签名) + tagAttr; (处理标签上的属性参数传递,默认 true) + tagContent; (处理标签内容中的参数传递,默认 true) + compress; (是否对css和js进行压缩处理,默认 true)

#License ISC

Current Tags

  • 1.1.7                                ...           latest (3 years ago)

16 Versions

  • 1.1.7                                ...           3 years ago
  • 1.1.6                                ...           3 years ago
  • 1.1.5                                ...           3 years ago
  • 1.1.3                                ...           4 years ago
  • 1.1.2                                ...           4 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.9                                ...           5 years ago
  • 1.0.8                                ...           5 years ago
  • 1.0.7                                ...           5 years ago
  • 1.0.6                                ...           5 years ago
  • 1.0.5                                ...           5 years ago
  • 1.0.4                                ...           5 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 2
Dependencies (2)
Dev Dependencies (4)

Copyright 2014 - 2017 © taobao.org |