神刀安全网

利用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引入问题

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮