前言

通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的html代码。那修改起来不是很麻烦吗?

一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO

头部:

尾部:

对于后端的同学而言,他们可以通过模版来进行拆分。这样做可以提高html代码的复用性和可维护性。但对于只是对设计图而制作成静态页面的同学而言他们,html没有提供像模版的include这种方法。但又不想使用到后端的模版,那么接下来的我介绍的几个工具也许可以帮助到你。

gulp-file-include

第一个我要介绍的是一个gulp的插件,他提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项,详细可以去看看 gulp-file-include

下面我们写一个小demo来快速的了解一下,我们需要先安装gulp以及gulp-file-include

npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install gulp --save-dev
npm install gulp-file-include --save-dev

安装好之后,来简单的组织一下文件的目录:

|-node_modules
|-page // 生产环境的 html 存放文件夹
|-include // 公共部分的 html 存放文件夹
|-*.html
|-dist // 编辑后的 html 文件
gulpfile.js

在新建的gulpfile.js,配置好gulp-file-include

var gulp = require('gulp');
var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() {
// 适配page中所有文件夹下的所有html,排除page下的include文件夹中html
gulp.src(['page/**/*.html','!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});

接着新建两个html文件,分别是头部和底部:

header.html

<h1>这是 header 的内容</h1>

footer.html

<h1>这是 footer 的内容</h1>

最后在新建一个html,把要用到的headerfooterinclude进来。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
@@include('include/header.html') <p> 这是 layout 的内容 </p> @@include('include/footer.html')
</body>
</html>

最后回到命令行工具里,执行gulp fileinclude

看到编译完成之后,到dist目录一下有一个layout.html的文件,这就是最后编译出来的。

好了,上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力,使得自己写的html代码更加具有维护性和可复用性。

前后端分离中,Gulp实现头尾等公共页面的复用的更多相关文章

  1. 前后端分离中,gulp实现头尾等公共页面的复用 前言

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...

  2. nodejs--JWT 在前后端分离中的应用与实践

    nodejs--JWT 在前后端分离中的应用与实践 http://www.cnblogs.com/lidongyue/p/5269695.html

  3. 前后端分离中的无痛刷新token机制

    今天我们来说一说前后端分离中的无痛刷新token机制 博主先来分享一波福利,最近挖到的宝藏,刚开始学Java的同学看 https://www.bilibili.com/video/BV1Rx41187 ...

  4. JWT 在前后端分离中的应用与实践

    关于前后端分离 前后端分离是一个很有趣的议题,它不仅仅是指前后端工程师之间的相互独立的合作分工方式,更是前后端之间开发模式与交互模式的模块化.解耦化.计算机世界的经验告诉我们,对于复杂的事物,模块化总 ...

  5. shiro vue 前后端分离中模拟登录遇到的坑

    系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...

  6. Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...

  7. Springboot前后端分离中,后端拦截器拦截后,前端没有对应的返回码可以判断

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时 ...

  8. web 部署专题(九):Nginx 前后端分离中csrf_token 认证的实现

    1. 思路 参考:https://stackoverflow.com/questions/20826201/simple-csrf-protection-using-nginx-alone?r=Sea ...

  9. 前后端分离中,使用swagger2和WireMock提高开发速度

    一.使用swagger2生成接口文档 依赖 <dependency> <groupId>io.springfox</groupId> <artifactId& ...

随机推荐

  1. .NET跨平台之旅:基于.NET Core改写EnyimMemcached,实现Linux上访问memcached缓存

    注:支持 .NET Core 的 memcached 客户端 EnyimMemcachedCore 的 NuGet 包下载地址:https://www.nuget.org/packages/Enyim ...

  2. Javascript身份证号码验证

    "来来来,坐这儿". "什么?我可是有身份的人,怎么能和你坐一块儿".沛笠晃了晃手里的身份证,不屑说道. "你咋不上天呢?有身份还喝油条吃豆浆&quo ...

  3. go channel

    channel 是go语言中不同goroutine之间通信一种方法 //定义一个channel c := make(chan bool) //向channel中写入 c <- true //读取 ...

  4. React JS的基本用法[ES5,纯前端写法]

    1.配置webpack npm install -g webpack #webpack的cli npm install -g webpack-dev-server #webpack自带的服务器 npm ...

  5. Power BI REST API

    Overview of Power BI REST API https://msdn.microsoft.com/en-us/library/dn877544.aspx 验证方式 OAuth 2.0 ...

  6. 兄弟连javascript学习笔记

    /* Javascript:用来在页面中编写特效,和HTML.CSS一样都是有浏览器解析 Javascript语言: 一.JS如何运行(javascript,jscript,vbscript,appl ...

  7. hibernate- Hibernate中多对多的annotation的写法(中间表可以有多个字段)

    http://blog.csdn.net/liuxianbing119/article/details/7283769

  8. BZOJ1192 [HNOI2006]鬼谷子的钱袋

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. 利用django创建一个投票网站(三)

    创建你的第一个 Django 项目, 第三部分 这一篇从第二部分(zh)结尾的地方继续讲起.我们将继续编写投票应用,并且聚焦于如何创建公用界面--也被称为"视图". 设计哲学 Dj ...

  10. 2016第七季极客大挑战Writeup

    第一次接触CTF,只会做杂项和一点点Web题--因为时间比较仓促,写的比较简略.以后再写下工具使用什么的. 纯新手,啥都不会.处于瑟瑟发抖的状态. 一.MISC 1.签到题 直接填入题目所给的SYC{ ...