在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个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、页面效果

需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

gulp实现公共html代码复用的更多相关文章

  1. C++进阶--代码复用 继承vs组合

    //############################################################################ /* * 代码复用: 继承 vs 组合 * ...

  2. HTML 代码复用实践 (静态页面公共部分提取复用)

    原文:HTML 代码复用实践 上面的链接里面安装配置步骤已经非常详细,这里主要记录我操作过程中遇到的几个问题 gulp-file-include 的使用     按上面的步骤安装之后,node_mod ...

  3. Django基础-004 上下文管理器&中间件&前端公共代码复用

    一.上下文管理器 在views中重复使用的代码,可以在上下文管理器中实现 上下文管理器的处理流程如下: 1.先走完views里面的代码,将结果返回给前端 2.然后再将上下文的结果返回给前端 3.上下文 ...

  4. 03-模板(过滤器,代码复用,表单,CSRF)

    模块代码复用 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有相同的模板代码内容,但是内容中部分值不一样 多个模板中具有完全相同的 html 代码块内容 像遇到这种 ...

  5. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  6. Django 基础05篇 上下文管理和前端代码复用

    一.上下文管理器 在views中重复使用的代码,可以通过上下文管理器(在setting.py文件中的TEMPLATES中配置)中实现,减少代码冗余 上下文管理器的处理流程如下: 1.先走完views里 ...

  7. if __name__== "__main__" 的意思(作用)python代码复用

    if __name__== "__main__" 的意思(作用)python代码复用 转自:大步's Blog  http://www.dabu.info/if-__-name__ ...

  8. Atitit 代码复用的理解attilax总结

    Atitit 代码复用的理解attilax总结 1.1. 继承1 1.1.1. 模式1:原型继承1 1.1.2. 模式2:复制所有属性进行继承 拷贝继承1 1.1.3. 模式3:混合(mix-in)1 ...

  9. javascript 模式(1)——代码复用

    程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实 ...

随机推荐

  1. 冒泡排序-Python与PHP实现版

    Python实现 import random a=[random.randint(1,999) for x in range(0,33)] # 冒泡排序,python中数组是按引用传递的,会直接在原数 ...

  2. django之第二天

    今天学习目标: 一,路由系统 1,默认处理函数 2,动态URL 3,分级匹配 4,反射实现动态路由 二.中间件 三.Model(重点) 1,创建表 2,操作表数据 四.Form (重点) 1,用户提交 ...

  3. 关于iOS GangSDK的使用,为App快速集成社群公会模块

    手上有一个自己开发的小游戏,想加一个家族系统活跃下游戏的氛围,想到这块儿可能会有大量的工作需要自己做,就偷了个懒去网上搜罗了一波,结果惊奇的发现居然真的有类似的服务,并且还是免费的,所以决定入坑尝试一 ...

  4. css 单行文本居中显示,多行文本左对齐

    父级元素 text-align:center; 自级元素 text-align:left; display:inline-block;

  5. 老男孩最新Python全栈开发视频教程(92天全)重点内容梳理笔记 看完就是全栈开发工程师

    为什么要写这个系列博客呢? 说来讽刺,91年生人的我,同龄人大多有一份事业,或者有一个家庭了.而我,念了次985大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...

  6. web离线应用--applicationCache

    applicationCache是html5新增的一个离线应用功能 离线浏览: 用户可以在离线状态下浏览网站内容. 更快的速度: 因为数据被存储在本地,所以速度会更快. 减轻服务器的负载: 浏览器只会 ...

  7. Servlet交互【重定向 与 请求分派】详解

    Servlet交互 在serlvet中,需要调用另外一个资源来对浏览器的请求进行响应,两种方式实现: 调用HttpServletResponse.sendRedirect 方法实现 重定向 调用Req ...

  8. Laravel框架使用的一些注意细节(一)

    1.资源路由RESTful 当你不想编写太多的路由的时候,肯定会用到RESTful资源控制器.但当你使用资源控制器的时候,需要注意的是,你的资源路由的名字不能与public目录下的文件有重名,否则会导 ...

  9. P2024食物链

    题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我 ...

  10. 基于 HTML5 Canvas 的 3D 碰撞检测

    这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转.放大缩小这个三个图形,点击"Animate"就能让中间 ...