传统开发过程中
可能你写好了前端页面,给后台去套,你就没啥事了
又或者,你可能需要在你的前端页面写上各种后台模板代码,对于我这种前端洁癖,简直不能忍!
本文将介绍一种前后端分离的方式,但又能保留着前端能使用后台代码的兼容性
既然决定了这种开发模式,我们最先设计的应该是从目录开始
本次项目的后台是用ThinkPHP的框架,ThinkPHP有个很坑的地方,我们必须把所有的静态文件放在Public
下,而页面必须放在Application/Home/View
下
而依照我的想法,前端所有代码就应该放在一个src目录下,既可以使用IDE的路径补全【无需写后台路径!这个在我看来很恶心,如(PUBLIC/xxx)】,页面又无需任何后台环境可直接访问,进行逻辑操作
给出目录
把我们所有的页面都写在views下,views你可以继续根据业务细分目录,比如PC站,移动端站。PC和移动端站又可根据业务继续目录细分。对应的css,js,imgs,unitTest也是如此。
我们的目录结构约定好后,最后gulp无论是输出到Public
下,还是把页面输出到Application/Home/View
下都是一样的结构即可。
接着,我们把gulp的task
,一个一个进行介绍:
csspath就是你src下的路径,如果我们要发布则执行压缩css代码 minicss,否则项目越大task每次执行时间就越长,简直不能忍
第一个情况是我们在js文件里写的ajax请求,也会需要一些路径替换,如果前端是用node做分层,那我们能直接写自己的前端请求进行模拟,但是最后线上的请求路径肯定是不同的,我们就可以做个替换为线上请求
第二个replace是在js中可能写有背景图片,或者src的地址,我们也需要替换
我们需要用gulp-rev替换静态文件版本号
同样html里可能存在js代码需要替换请求路径
html里我们会直接使用相对路径,线上需要替换为类似PUBLIC这样的路径
我们的a标签跳转地址也可能需要替换。比如以前可能写PHP里的U方法
最后我们还会在页面引入js测试数据,发布的时候需要把这个js的引用删除,这里我用的插件是gulp-html-replace
当然换成别的文件都是可以的,可自行搭配
以下是src里的文件下和输出目录文件对比
PS:剩下的还有可能有imgs文件,iconfont文件,大家都能利用这个思路进行输入输出
PS:另外这里就不例举js和css预处理了,大家一样能自行拓展
开发过程中我们需要一直开着的两个task
现在如果还用liveReload的劝你早日换browserSync吧,前端必备神器,不解释
由于开着auto,这在调试中页面的css和js都是没压缩过,方便调试。直到项目需要上线我们build一次即可
1.前端mock数据之后,可直接测试,浏览器打开自动刷新,无需依赖任何后台环境
2.初次进入页面拥有直接带入数据的能力
3.前端不需要学习后端代码,全前端静态模式编写(路径都无需写后台所需路径,如PUBLIC),哪怕是部门有新人加入项目,学习成本也低
4.前端页面依旧可使用后台代码
- 5.前后端分离,纯json数据对接
1.纯前端渲染性能可能比后台吞吐略低
- 2.对于后台套页面相比,对接成本略有上升
最后给出这次我的项目配置github地址
https://github.com/MeCKodo/myGulpConfig/blob/master/gulpfile.php.js
blog地址
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123