传统开发过程中
可能你写好了前端页面，给后台去套，你就没啥事了
又或者，你可能需要在你的前端页面写上各种后台模板代码，对于我这种前端洁癖，简直不能忍！
本文将介绍一种前后端分离的方式，但又能保留着前端能使用后台代码的兼容性
既然决定了这种开发模式，我们最先设计的应该是从目录开始
本次项目的后台是用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，一个一个进行介绍：
一、CSS部分比较简单
csspath就是你src下的路径，如果我们要发布则执行压缩css代码 minicss，否则项目越大task每次执行时间就越长，简直不能忍
二、js部分，我们新增了两个replace的方法
第一个情况是我们在js文件里写的ajax请求，也会需要一些路径替换，如果前端是用node做分层，那我们能直接写自己的前端请求进行模拟，但是最后线上的请求路径肯定是不同的，我们就可以做个替换为线上请求
第二个replace是在js中可能写有背景图片，或者src的地址，我们也需要替换
三、HTML部分
我们需要用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地址
随时随地看视频
热门评论
-
行学2016-12-04 0
-
啸沧海2016-03-19 0
查看全部评论include 文件怎么办
好象thinkphp 的public目录可以自己定义的