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>
posted @ 2022-09-16 15:49  上海-悠悠  阅读(249)  评论(0)  编辑  收藏  举报