node.js 使用教程-1.使用gulp-file-include插件，实现html复用

最新推荐文章于 2023-04-29 16:17:40 发布

上海-悠悠

最新推荐文章于 2023-04-29 16:17:40 发布

阅读量465

点赞数

分类专栏： JavaScript 文章标签： node.js gulp html

本文链接：https://blog.csdn.net/qq_27371025/article/details/127028871

版权

JavaScript 专栏收录该内容

63 篇文章 6 订阅

订阅专栏

前言

做后端开发的时候可以用模板生成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>

上海-悠悠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js 使用教程-1.使用gulp-file-include插件，实现html复用

做后端开发的时候可以用模板生成html代码，像多个页面一些公共的导航栏，侧边栏都需要复用，方便维护。纯前端开发，可以用到gulp-file-include编译工具进行一次替换，之后页面html页面就是完整的。
复制链接

扫一扫

专栏目录