gulp实现公共html代码复用

在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个html页面都写一遍,这样也不便后期维护等操作,所以可以把顶部导航和底部这两块的html代码单独写在两个html文件里:header.html和footer.html,然后在每个html文件只需要在适当的位置引入公共部分的代码即可。gulp有一个插件gulp-file-include即可实现该操作,gulp编译完成之后,便可在每个html文件里自动加上公共部分的代码。现写一个简单的小demo如下:

1、新建一个项目demo,我这里取名为:gulp

demo目录如下

2、在gulp目录下安装gulp插件

  1、执行:gulp init 命令,一直回车,然后生成一个package.json文件

  2、安装gulp:npm install gulp --save-dev

  3、安装gulp-file-include:npm install gulp-file-include --save-dev

3、在src/include目录下新建三个html文件

  这里的文件便是公共的html部分,是要在每个html页面被引入的。

3.1、meta.html:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文件引入</title>
<meta name="keywords" content="aa,bb,cc,dd,ee,ff">
<meta name="description" content="1234567890">
<link rel="icon" sizes="any" mask="" href="" />
<link rel="stylesheet" type="text/css" href="/dist/css/common.css" />
<meta name="format-detection " content="telephone=no">

3.2、header.html

<div>
    <button><a href="/index.html">首页</a></button>
    <button><a href="/trade-news.html">行业新闻</a></button>
    <button><a href="/product/product.html">公司产品</a></button>
    <button><a href="/contact.html">联系我们</a></button>
</div>

3.3、footer.html

<div>这是footer部分</div>

4、在pages目录下新建几个html页面,在每个页面的适当位置引入include目录下的html文件

注意:@@include后面填写的是相对路径

4.1、src/pages/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../include/meta.html')

</head>
<body>
@@include('../include/header.html')
<div>首页</div>
@@include('../include/footer.html')
</body>
</html>

4.2、src/pages/product/product.html

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../../include/meta.html')
</head>
<body>
@@include('../../include/header.html')
<div>公司产品页</div>
@@include('../../include/footer.html')
</body>
</html>

其他就省略

5、gulpfile.js文件

/**
 * Created by libo on 2017/12/21.
 */
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function () {
    gulp.src('src/pages/**/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
});

6、执行gulp fileinclude 命令

然后在gulp项目下会生成一个dist目录,相应编译好的html文件都在该目录下。

比如:dist目录下index.html文件的代码如图:

7、页面效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot 核心技术

第二十二章:SpringBoot项目多模块运用与设计

3974
来自专栏web开发实践

结合腾讯云开发微信小程序

目前,微信小程序越来越流行,而且功能越来越强大,在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ,小程序的开发快捷,使用方便,越来越多的产品...

8599
来自专栏小文博客

扒站==一条代码?

2253
来自专栏玩转JavaEE

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来...

4615
来自专栏微信小程序开发

python\b包cutImages生成方法,可以把自己的代码包发布到网上

如何分享自己的python代码到pypi,方便其他同学使用?相信不少写python的同学都用过第三方提供的库,使用这些库减少了我们的一些工作量,那么,你是否考虑...

34711
来自专栏WindCoder

ubuntu13.10下安装Eclipse兼tar.gz提取时提示失败的解决办法

前段时间一直想编程时在linux下常驻,于是在ubuntu里面配置java环境,按Eclipse遇到了点问题,就一直没能继续进行下去,今天刚刚找到解决办法,终于...

741
来自专栏学海无涯

iOS开发之使用Git的基本使用(二)

通过前文iOS开发之使用Git的基本使用(一)的学习,相信大家对如何将iOS项目通过Git传到GitHub账户上有了一个基本的了解,其过程是相对繁琐和容易出错的...

702
来自专栏Guangdong Qi

# 微信小程序开发之-初试

1823
来自专栏Java成神之路

Java_脚本引擎_02_在Idea中进行Nashorn的Debug

这一节我们来看下怎么在idea中进行Nashorn的Debug ,又或者说怎么在Idea中进行js的Debug

1554
来自专栏自由而无用的灵魂的碎碎念

Vmware10如何打开vmware11建立的虚拟机

使用文本工具打开VMware 虚拟机配置文件(*.vmx文件),找到"virtualHW.version"一行,将值11修改为10保存即可。

1002

扫码关注云+社区

领取腾讯云代金券