前言

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

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

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

gulp-file-include

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

下面我们写一个小demo来快速的了解一下，我们需要先安装gulp以及gulp-file-include,，在安装代码之前，需要先新建gulp或者其他名称的项目文件夹，之后新建package.json文件，内容为一对中括号

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'));

});

接着在include文件夹里面新建两个html文件，分别是头部和底部：

header.html

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

footer.html

<h1 onclick="skip()">这是 footer 的内容</h1>

<script>

    function skip() {

        console.log('000');

    }

</script>

最后在page文件夹里面新建一个html，把要用到的header和footer给include进来。

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文件夹下执行gulp fileinclude：

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

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

PS：如果执行gulp fileinclude时遇到

[14:03:31] Local gulp not found in E:\workSpace\gulp

[14:03:31] Try running: npm install gulp

则需去gulp文件夹下执行>npm install gulp --save-dev

然后再去gulp文件夹下执行>gulp fileinclude，出现以下页面即为成功，如修改了include里面的代码，则需再执行一次gulp fileinclude；其他问题尚未发现，欢迎补充，共同研究。

https://files.cnblogs.com/files/theWayToAce/gulp.rar

前后端分离中，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. 幸运的袋子（深度优先遍历（Depth First Search，DFS））

    题目描述 一个袋子里面有n个球,每个球上面都有一个号码(拥有相同号码的球是无区别的).如果一个袋子是幸运的当且仅当所有球的号码的和大于所有球的号码的积. 例如:如果袋子里面的球的号码是{1, 1, 2 ...

  2. gossip版本raft算法实现

    raft算法的实现概述 节点的启动和加入: 1. 第一个节点启动,发现没有其他的member节点,则自己变成master 2. 第二个节点启动并加入第一个节点,发现有member节点,并且master ...

  3. Python3 小工具-僵尸扫描

    僵尸机的条件: 1.足够闲置,不与其他机器进行通讯 2.IPID必须是递增的,不然无法判断端口是否开放 本实验僵尸机选择的是Windows2003 from scapy.all import * im ...

  4. 第一章 Windows编程基础（1~4课）

    第一课:从main到WinMain 第二课:窗口和消息 第三课:MFC编程 第四课:MFC应用程序框架 概括: Win32的两种编程框架:SDK方式.MFC方式 1. SDK方式:使用WinMain入 ...

  5. Thunder团队第二周 - Scrum会议4

    Scrum会议4 小组名称:Thunder 项目名称:爱阅app Scrum Master:邹双黛 工作照片: 宋雨同学在拍照,所以不再照片中. 参会成员: 王航:http://www.cnblogs ...

  6. 软件工程课堂作业（二）续——升级完整版随机产生四则运算题目（C++）

    一.设计思想: 1.根据题目新设要求,我将它们分为两类:一类是用户输入数目,根据这个数目改变一系列后续问题:另一类是用户输入0或1,分情况解决问题. 2.针对这两类要求,具体设计思路已在上篇博文中写出 ...

  7. ACM 第十五天

    计算几何基础 练习题 C - Wasted Time Mr. Scrooge, a very busy man, decided to count the time he wastes on all ...

  8. lintcode-34-N皇后问题 II

    34-N皇后问题 II 根据n皇后问题,现在返回n皇后不同的解决方案的数量而不是具体的放置布局. 样例 比如n=4,存在2种解决方案 标签 递归 思路 参考http://www.cnblogs.com ...

  9. 利用闭包判断Dom元素和滚动条的方向

    本文收集整理自网上. 一,判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动 ...

  10. Python实现XML的操作

    本文从以下两个方面, 用Python实现XML的操作: 一. minidom写入XML示例1 二. minidom写入XML示例2 三. ElementTree写入/修改示例 四. ElementTr ...