node.js 使用教程-1.使用gulp-file-include插件，实现html复用
Posted 上海-悠悠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了node.js 使用教程-1.使用gulp-file-include插件，实现html复用相关的知识，希望对你有一定的参考价值。
前言
做后端开发的时候可以用模板生成html代码，像多个页面一些公共的导航栏，侧边栏都需要复用，方便维护。
纯前端开发，可以用到gulp-file-include编译工具进行一次替换，之后页面html页面就是完整的。
安装gulp-file-include
先安装gulp以及gulp-file-include
先全局安装gulp
npm install -g gulp
gulp安装到当前开发环境
npm install gulp --save-dev
安装gulp-file-include
npm install gulp-file-include --save-dev
官方教程https://www.npmjs.com/package/gulp-file-include
配置gulpfile.js
项目下新增gulpfile.js 文件，配置内容
//提示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'));
);
使用示例
项目结构
└─dist
└─src
├─include
└─foot.html
└─top.html
└─index.html
└─gulpfile.js
└─package.json
初始化项目生成package.json
npm init -y
foot.html内容
<div>
<h1>这是foot部分</h1>
</div>
top.html内容
<div>
<h1>这是top部分</h1>
</div>
index.html内容
<!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>
执行命令
gulp fileinclude
最后在dist目录生成的代码如下
<!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>
以上是关于node.js 使用教程-1.使用gulp-file-include插件，实现html复用的主要内容，如果未能解决你的问题，请参考以下文章