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

前言

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

安装gulp-file-include

先安装gulp以及gulp-file-include 先全局安装gulp

代码语言：javascript复制

npm install -g gulp

gulp安装到当前开发环境

代码语言：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 -y

foot.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>

gulp javascript html

0 人点赞