标签：node 插件 top js gulp html file foot include
前言
做后端开发的时候可以用模板生成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 文件，配置内容
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,插件,top,js,gulp,html,file,foot,include 来源： https://www.cnblogs.com/yoyoketang/p/16700192.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。