利用gulp解决前后端分离的header/footer引入问题
Posted 吕大豹
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用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的改动并且动态更新所有页面的内容了。
以上是关于利用gulp解决前后端分离的header/footer引入问题的主要内容，如果未能解决你的问题，请参考以下文章