在我们进行前后端完全分离的时候，有一个问题一直是挺头疼的，那就是公共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. SQL 谜题(父亲的邮票)

    问题:父亲需要些1分,2分,3分,5分,10分的邮票, 其中两种各买四张,另外的三种各买三张 我忘记是哪几种了?他给了我一些10分硬币,金额刚好买这些邮票 计算及分析过程: --通过极限算法,若都是3 ...

  2. 学习微信小程序之css3display

    一display diaplay改变标签的模式,行内装块级(block),块级转行内(inline) 通过设置display为none,可以 让整个标签在页内移除掉 设置visibility为hidd ...

  3. RadioButton（单选按钮）文字在按钮的左边

    <RadioButton style="@style/CustomCheckboxTheme" android:layout_width="fill_parent& ...

  4. 可变参数列表与printf()函数的实现

    问题 当我们刚开始学习C语言的时候,就接触到printf()函数,可是当时"道行"不深或许不够细心留意,又或者我们理所当然地认为库函数规定这样就是这样,没有发现这个函数与普通的函数 ...

  5. 【字符串匹配】KMP算法和next数组的c/c++实现

    KMP算法基本思想有许多博客都写到了,写得也十分形象,不懂得可以参考下面的传送门,我就不解释基本思想了.本文主要给出KMP算法及next数组的计算方法(主要是很多网上的代码本人(相信应该是许多人吧)看 ...

  6. Unreal4教程总结

    一些好的教程分享 Ue4大神的博客 http://www.tomlooman.com 关于CustomDepth的文章的翻译 http://gad.qq.com/program/translatevi ...

  7. 【BZOJ1662】[Usaco2006 Nov]Round Numbers 圆环数 数位DP

    [BZOJ1662][Usaco2006 Nov]Round Numbers 圆环数 Description 正如你所知,奶牛们没有手指以至于不能玩"石头剪刀布"来任意地决定例如谁 ...

  8. JavaScript对象状态

    有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物. 简单说,它有三个特征: * 状态总数(state)是有限的. * 任一时刻,只处在一种状态之中. ...

  9. js前端模块化之加载器原理解析(一)

    先来说一下前端模块化的价值:引用模块此处有详细的介绍,可以自行前往观看. 一.总结如下优点: (1)解决命名冲突(2)烦琐的文件依赖(3)模块的版本管理(4)提高可维护性(5)前端性能优化(6)跨环境 ...

  10. 7_nodejs angularjs

    webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...