在我们进行前后端完全分离的时候，有一个问题一直是挺头疼的，那就是公共header和footer的引入。在传统利用后端渲染的情况下，我们可以把header、footer写成两个单独的模板，然后用后端语言的include即可在其他页面中引入。我之前在《一个简单粗暴的前后端分离方案》这篇文章中说过一种方法，就是用handlebars把header、footer模板预编译为js文件，然后在页面的头部用document.write写到页面中。这种方式的弊端也比较明显，那就是依赖一个模板引擎。在使用mvvm框架比较普遍的今天，静态模板的使用率似乎不是那么高了，所以我们不能过度依赖它。

事实上，如果我们的项目使用了gulp构建，是可以很轻松的利用gulp来完成页面的组建的。我们可以照样把header、footer写成两个模板，然后利用gulp把这两个模板拼接到各个页面中，同样能达到可复用、便于修改的目的。

需要用到的模块有：gulp、fs、gulp-replace这三个，定义一个task如下：

//引入头部底部

gulp.task('include', function() {

    var htmlDir = './html/';

    fs.readdir(htmlDir, function(err, files) {

        if (err) {

            console.log(err);

        } else {

            files.forEach(function(f) {

                if (f !== '_header.html' && f !== '_footer.html') {

                    gulp.src(htmlDir + f)

                        .pipe(replace(/<!--header-->[\s\S]*<!--headerend-->/, '<!--header-->\n' + fs.readFileSync(htmlDir + '_header.html', 'utf-8') + '\n<!--headerend-->'))

                        .pipe(replace(/<!--footer-->[\s\S]*<!--footerend-->/, '<!--footer-->\n' + fs.readFileSync(htmlDir + '_footer.html', 'utf-8') + '\n<!--footerend-->'))

                        .pipe(gulp.dest(htmlDir))

                }

            });

        }

    });

});

简单解释一下，首先利用fs模块来读取目标目录下的文件，我这里是./html/，然后遍历各个文件，把文件中的占位符<!--header--><!--headerend-->和<!--footer--><!--footerend-->分别替换为_header.html和_footer.html中的内容，最后在输出到原目录下就OK了。

既然是需要替换占位符，那么我们的页面结构应该是这样的，例如index.html

<!--header--><!--headerend-->

    <div>

        index页面

    </div>

    <script>

    </script>

<!--footer--><!--footerend-->

在顶部和底部分别写如上的占位标志。运行gulp后就会被相应的替换为header模板和footer模板中的内容了。

_header.html中的内容如下，是一个html页面的上半截：

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="/css/main.css">

        <script src="/lib/require.js"></script>

        <script src="/js/common/config.js"></script>

    </head>

    <body>

_footer.html中的内容，则是下半截：

    </body>

</html>

为什么要用replace替换占位符的方式，而不用concat直接把内容给追加到页面呢？这是考虑到gulp任务可能执行多次的情况，重复追加内容无法控制，所以用正则匹配替换内容的方式，无论任务执行多少次都不会重复追加内容。

事实上，为了能够让header、footer模板修改的时候，其他页面也能自动更新内容，我们可以再加一个watch任务：

gulp.task('watch', function() {

    gulp.watch(['./html/_header.html', './html/_footer.html'], ['include']);

});

这样我们启动这个watch任务的时候，就可以实时监听header、footer的改动并且动态更新所有页面的内容了。

利用gulp解决前后端分离的header/footer引入问题的更多相关文章

  1. 利用CORS解决前后端分离的跨域资源问题

    CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...

  2. 实现真正意义上的前后端分离------由淘宝引入nodejs引发的思考

    说起前后端分离,大家包括我自己都会想到: 当今流行的MVC不就是最标准的前后端分离吗? 说到这里,我不禁要反问,MVC真正的实现了前后端分离了吗? 无论是PHP的MVC框架TP还是JAVA的MVC框架 ...

  3. SpringBoot20 集成SpringSecurity02 -> 利用SpringSecurity进行前后端分离的登录验证

    1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入Spirn ...

  4. 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...

  5. Nginx完美解决前后端分离端口号不同导致的跨域问题

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...

  6. nginx配置反向代理解决前后端分离跨域问题

    摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...

  7. 解决前后端分离后的Cookie跨域问题

    一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...

  8. mock的使用及取消，node模仿本地请求：为了解决前后端分离，用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  9. 08 Django REST Framework 解决前后端分离项目中的跨域问题

    01-安装模块 pip install django-cors-headers 02-添加到INSTALL_APPS中 INSTALLED_APPS = ( ... 'corsheaders', .. ...

随机推荐

  1. Java集合框架练习-计算表达式的值

    最近在看<算法>这本书,正好看到一个计算表达式的问题,于是就打算写一下,也正好熟悉一下Java集合框架的使用,大致测试了一下,没啥问题. import java.util.*; /* * ...

  2. 使用极光推送(www.jpush.cn)向安卓手机推送消息【服务端向客户端主送推送】C#语言

    在VisualStudio2010中新建网站JPushAndroid.添加引用json帮助类库Newtonsoft.Json.dll. 在web.config增加appkey和mastersecret ...

  3. MySQL学习笔记02_数据库和表的基本操作

    02_1 操作数据库 (1)创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[, create_specifica ...

  4. 利用Photoshop修改图片以达到投稿要求

    摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...

  5. 在CentOS下利用Python+selenium获取腾讯首页的今日话题。

    1.安装依赖包 yum install wget firefox gcc zlib zlib-devel Xvfb 2.安装setuptools 官网地址:https://pypi.python.or ...

  6. Nodejs windows的安装

    0.下载地址: http://nodejs-org.qiniudn.com/ https://nodejs.org/download/ https://nodejs.org/en/ 1.基本就是一路N ...

  7. Python开发工具PyCharm个性化设置(图解)

    Python开发工具PyCharm个性化设置,包括设置默认PyCharm解析器.设置缩进符为制表符.设置IDE皮肤主题等,大家参考使用吧. JetBrains PyCharm Pro 4.5.3 中文 ...

  8. BZOJ4293: [PA2015]Siano

    Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会长高a[i]厘米. Byteasar一共会进行m ...

  9. API，框架，组件

    API 是什么,API 就是通过提供方便使用的接口来执行它实现的功能. 用一个手电筒来作比喻: 手电筒的按钮就是接口,按下按钮就是它的方便的使用方式,发光就是它的功能,在这里我们可以称这个手电筒是个 ...

  10. debian下Apache和tomcat整合（使用apt工具）

    最近部署web系统,需要使用tomcat处理和Apache整合使用,tomcat处理JSP,Apache处理静态资源.开始不知道怎么操作,在网上查阅资料走了很多弯路.完成时候,发现其实很简单,现将配置 ...