前后端分离中,gulp实现头尾等公共页面的复用 前言
2017-09-21 14:36
197 查看
前言
通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的
一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO
对于后端的同学而言,他们可以通过模版来进行拆分。这样做可以提高
gulp-file-include
第一个我要介绍的是一个
下面我们写一个小
安装好之后,来简单的组织一下文件的目录:
在新建的
接着在include文件夹里面新建两个
header.html
footer.html
最后在page文件夹里面新建一个
layout.html
最后回到命令行工具里,在gulp文件夹下执行
看到编译完成之后,到
好了,上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力,使得自己写的
PS:如果执行gulp fileinclude时遇到
则需去gulp文件夹下执行>npm install gulp --save-dev
然后再去gulp文件夹下执行>gulp fileinclude,出现以下页面即为成功,如修改了include里面的代码,则需再执行一次gulp fileinclude;其他问题尚未发现,欢迎补充,共同研究。
https://files.cnblogs.com/files/theWayToAce/gulp.rar
通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的
html代码。那修改起来不是很麻烦吗?
一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO
对于后端的同学而言,他们可以通过模版来进行拆分。这样做可以提高
html代码的复用性和可维护性。但对于只是对设计图而制作成静态页面的同学而言他们,
html没有提供像模版的
include这种方法。但又不想使用到后端的模版,那么接下来的我介绍的几个工具也许可以帮助到你。
gulp-file-include
第一个我要介绍的是一个
gulp的插件,他提供了一个
include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的
include方法有许多配置项,详细可以去看看 gulp-file-include。
下面我们写一个小
demo来快速的了解一下,我们需要先安装
gulp以及
gulp-file-include,,在安装代码之前,需要先新建gulp或者其他名称的项目文件夹,之后新建package.json文件,内容为一对中括号
npm install -g gulp mkdir gulp-file-include && cd gulp-file-include npm install gulp --save-dev npm install gulp-file-include --save-dev
安装好之后,来简单的组织一下文件的目录:
|-node_modules |-page // 生产环境的 html 存放文件夹 |-include // 公共部分的 html 存放文件夹 |-*.html |-dist // 编辑后的 html 文件 gulpfile.js
在新建的
gulpfile.js,配置好
gulp-file-include:
var gulp = require('gulp'); var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { // 适配page中所有文件夹下的所有html,排除page下的include文件夹中html gulp.src(['page/**/*.html','!page/include/**.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });
接着在include文件夹里面新建两个
html文件,分别是头部和底部:
header.html
<h1>这是 header 的内容</h1>
footer.html
<h1 onclick="skip()">这是 footer 的内容</h1> <script> function skip() { console.log('000'); } </script>
最后在page文件夹里面新建一个
html,把要用到的
header和
footer给
include进来。
layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> @@include('include/header.html') <p> 这是 layout 的内容 </p> @@include('include/footer.html') </body> </html>
最后回到命令行工具里,在gulp文件夹下执行
gulp fileinclude:
看到编译完成之后,到
dist目录一下有一个
layout.html的文件,这就是最后编译出来的。
好了,上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力,使得自己写的
html代码更加具有维护性和可复用性。
PS:如果执行gulp fileinclude时遇到
[14:03:31] Local gulp not found in E:\workSpace\gulp [14:03:31] Try running: npm install gulp
则需去gulp文件夹下执行>npm install gulp --save-dev
然后再去gulp文件夹下执行>gulp fileinclude,出现以下页面即为成功,如修改了include里面的代码,则需再执行一次gulp fileinclude;其他问题尚未发现,欢迎补充,共同研究。
https://files.cnblogs.com/files/theWayToAce/gulp.rar
相关文章推荐
- 前后端分离中,Gulp实现头尾等公共页面的复用
- 将html分为头尾后打包整合,Gulp实现头尾等公共页面的复用
- gulp实现公共html代码复用
- Jsp/Java代码分离.实现页面真正的代码分离 前言
- 使用html-loader实现页面公共部分复用的功能
- 一个完全由后端人员写的前端页面怎么实现前后端分离?
- Gulp构建前后端分离(源代码及其实现)
- 使用自定义标签实现JSP页面和代码的分离
- Jsp/Java代码分离.实现页面真正的代码分离 实现框架代码,jxui:page标签
- 轻量级artTemplate引擎 实现前后端分离—基础篇(实战)
- Nginx+Tomcat实现反向代理、页面缓存、动静分离
- 使用gulp和browserSync实现页面自动刷新
- jsp标签实现页面与代码分离
- Webpack + Tomcat + Nginx/Apache实现前后端开发分离
- 使用模板实现ASP代码与页面分离
- 使用模板实现ASP代码与页面分离
- 前后端分离:使用spring的Aop实现Token验证
- 实现前后端分离的心得
- WebAPI 实现前后端分离
- vue+node+mysql实现前后端分离