利用gulp解决前后端分离的header/footer引入问题

简介:

在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共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的改动并且动态更新所有页面的内容了。


本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/5322639.html,如需转载请自行联系原作者

相关文章
|
7月前
|
前端开发 定位技术 API
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦...... 恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
|
12月前
|
存储 人工智能 Serverless
AI大模型助力客户对话分析评测文章
在数字化时代,企业面临客户对话数据处理的挑战。阿里云推出的AI大模型助力客户对话分析方案,通过整合多种云服务,实现对话数据的自动化分析,提升服务质量和客户体验。本文将详细介绍该方案的优势与实际应用效果。
|
缓存 前端开发 JavaScript
vue-router路由使用实例详解
vue-router路由使用实例详解
251 0
|
XML JSON 小程序
微信公众号开发(四)获取用户信息
获取用户信息,微信公众号提供了两种方式:
325 0
|
存储 弹性计算 缓存
Tair持久存储系列技术解读
阿里云数据库重磅发布自研Tair持久存储系列的产品打破了传统Redis中的数据只能在易失性存储上进行读写的刻板印象,针对客户不同业务阶段的数据存储要求与服务成本考量,全新实现了持久性更强、成本更低的KV数据库。
9152 0
Tair持久存储系列技术解读
|
4天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
15天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1313 5