在我们进行前后端完全分离的时候，有一个问题一直是挺头疼的，那就是公共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. HDU 5754 Life Winner Bo 组合博弈

    Life Winner Bo Problem Description   Bo is a "Life Winner".He likes playing chessboard gam ...

  2. HashMap两种遍历方式的深入研究

    转自:http://swiftlet.net/archives/1259 HashMap的遍历有两种方式,如下所示:第一种利用entrySet的方式:   1 2 3 4 5 6 7 Map map ...

  3. ecplise + hadoop 调试环境搭建

    1.需要安装包 1.1 hadoop源码包(hadoop-2.5.2-src.tar.gz) 1.2 hadoop 2X插件(hadoop2x-eclipse-plugin-master.zip) 1 ...

  4. ci框架登陆之后每隔几分钟就需要重新登录的问题

    一个简单的登陆写好之后,发现每次进入需要登陆之后才能进入的页面都会跳转到登录页面,猜测应该是session被清了,打印出来,果然为空,但是我没有设置session的生存周期,按照默认的应该是24小时, ...

  5. 当DevOps撞上物联网

    DevOps 领域在近年来变得流行而普遍.它强调不同的角色之间共同协作,以及如何工作得更加紧密,就像这个词语的词根暗示的那样--开发和运维.但是DevOps和物联网有什么关系? 本文选自<Dev ...

  6. python调用c\c++

    前言 python 这门语言,凭借着其极高的易学易用易读性和丰富的扩展带来的学习友好性和项目友好性,近年来迅速成为了越来越多的人们的首选.然而一旦拿python与传统的编程语言(C/C++)如来比较的 ...

  7. android开发：深入理解View(一)：从setContentView谈起

    我们都知道 MVC,在Android中,这个 V 即指View,那我们今天就来探探View的究竟. 在onCreate方法中,可以调用this.setContentView(layout_id),来设 ...

  8. 【刷题记录】首师附NOIP练习20160820

    [由于老师不让发题目,So只能发考点喽!!!!噜噜噜] [题目(嘘~~~~~)]:百度云下载 [T1]:好像是DP,路径压缩+排序+分情况处理100分(噜噜噜) [T2]:正解好难的样子,DFS乱搞了 ...

  9. Codeforces Round #377 (Div. 2)

    #include <iostream> #include <stdio.h> #include <string.h> using namespace std; in ...

  10. Nginx 正向代理

    目前现状:只有1个机器能上网(web),其他机器不能 方法:能上网的做一个代理web服务器中转,其他机器连接它即可.采用nginx Nginx配置如下: server{         resolve ...