node.js 使用教程-3.gulp-file-include 详细教程

前言

gulp-file-include是gulp插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来，实现 html 复用。

环境准备

gulp-file-include 是gulp的插件，所以需要先安装gulp

npm install -g gulp
npm install gulp --save-dev 
npm install gulp-file-include --save-dev

gulp 版本目前是4.0.2

include 使用

目录结构

index.html

  
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  

view.html

view

var.html

@@name
@@age
@@socials.fb
@@socials.tw

gulpfile.js 合并html

var gulp = require('gulp');       // 导入gulp
const fileinclude = require('gulp-file-include');


gulp.task('fileinclude', async ()=> {
  gulp.src(['src/index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist/'));
});

执行命令

gulp fileinclude

就可以得到dist/index.html

    
    
    
    


    
include 使用示例
    
view
    haoxin
12345
facebook.com/include
twitter.com/include
    

filters

filters 可以把markdown 文档转成html 标签, 需先安装插件

npm install markdown

index.html

  
  @@include(markdown('view.md'))
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
        "fb": "facebook.com/include",
        "tw": "twitter.com/include"}
  })
  

view.md

# 环境
vscode

# 环境准备

1.安装
> npm install gulp -g

2.安装md插件
> npm install markdown

gulpfile.js

const fileinclude = require('gulp-file-include');
const markdown = require('markdown');
const gulp = require('gulp');

gulp.task('fileinclude', async function() {
  gulp.src(['src/index.html'])
    .pipe(fileinclude({
      filters: {
        markdown: markdown.parse
      }
    }))
    .pipe(gulp.dest('dist/'));
});

执行 gulp fileinclude后生成的dist/index.html

  
  
环境

vscode

环境准备

1.安装

npm install gulp -g

2.安装md插件

npm install markdown
  haoxin
12345
facebook.com/include
twitter.com/include
  

if 使用

index.html

@@include('some.html', { "nav": true })

@@if (name === 'test' && nav === true) {
  @@include('test.html')
}

gulpfile.js

fileinclude({
  context: {
    name: 'test'
  }
});

for 使用

index.html

@@for (var i = 0; i < arr.length; i++) {
  
`+arr[i]+`
}

gulpfile.js

fileinclude({
  context: {
    arr: ['test1', 'test2']
  }
});

loop 使用

index.html

  @@loop('loop-article.html', [
    { "title": "My post title", "text": "
lorem ipsum...
" },
    { "title": "Another post", "text": "
lorem ipsum...
" },
    { "title": "One more post", "text": "
lorem ipsum...
" }
  ])

loop-article.html

  
@@title
  @@text

loop + data.json

data.json

[
  { "title": "My post title", "text": "
lorem ipsum...
" },
  { "title": "Another post", "text": "
lorem ipsum...
" },
  { "title": "One more post", "text": "
lorem ipsum...
" }
]

loop-article.html

  @@loop("loop-article.html", "data.json")

webRoot内置上下文变量

上下文的webRoot字段包含从源文档到源根的相对路径（除非上下文选项中已设置该值）。
support/contact/index.html

  
    
  
  
    
Support Contact Info
    
Home
  
  

result:

  
    
  
  
    
Support Contact Info
    
Home
  
  

github文档地址https://github.com/haoxins/gulp-file-include