前言
做后端开发的时候可以用模板生成html代码，像多个页面一些公共的导航栏，侧边栏都需要复用，方便维护。 纯前端开发，可以用到gulp-file-include编译工具进行一次替换，之后页面html页面就是完整的。
安装gulp-file-include
先安装gulp以及gulp-file-include 先全局安装gulp
代码语言：javascript复制npm install -g gulpgulp安装到当前开发环境
代码语言：javascript复制npm install gulp --save-dev安装gulp-file-include
代码语言：javascript复制npm install gulp-file-include --save-dev官方教程https://www.npmjs.com/package/gulp-file-include
配置gulpfile.js
项目下新增gulpfile.js 文件，配置内容
代码语言：javascript复制//提示require找不到就加下面这2行
//import { createRequire } from 'module';
//const require = createRequire(import.meta.url);
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
gulp.src('src/**.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});使用示例
项目结构
代码语言：javascript复制└─dist
└─src
├─include
└─foot.html
└─top.html
└─index.html
└─gulpfile.js
└─package.json初始化项目生成package.json
代码语言：javascript复制npm init -yfoot.html内容
代码语言：javascript复制<div>
<h1>这是foot部分</h1>
</div>top.html内容
代码语言：javascript复制<div>
<h1>这是top部分</h1>
</div>index.html内容
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
@@include('include/top.html')
<h1>使用示例</h1>
@@include('include/foot.html')
</body>
</html>执行命令
代码语言：javascript复制 gulp fileinclude最后在dist目录生成的代码如下
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>这是top部分</h1>
</div>
<h1>使用示例</h1>
<div>
<h1>这是foot部分</h1>
</div>
</body>
</html>
