这可能是较好的gulp实战(后台thinkphp版)
来源:互联网 发布:seo发展方向 编辑:程序博客网 时间:2024/06/10 13:47
传统开发过程中http://www.imooc.com/article/3135
可能你写好了前端页面,给后台去套,你就没啥事了
又或者,你可能需要在你的前端页面写上各种后台模板代码,对于我这种前端洁癖,简直不能忍!
本文将介绍一种前后端分离的方式,但又能保留着前端能使用后台代码的兼容性
既然决定了这种开发模式,我们最先设计的应该是从目录开始
本次项目的后台是用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地址
http://www.meckodo.com/?p=416
作者: Kodo
链接:http://www.imooc.com/article/3135
来源:慕课网
- 这可能是较好的gulp实战(后台thinkphp版)
- gulp-sass安装失败的原因可能是没有.net framework 2.0 SDK 和vs2015
- 可能是ThinkPHP导航高亮显示当前页面的最简便的方法
- 实战gulp
- 美团猫眼android模块化实战-可能是最详细的模块化实战
- 这可能是最好的性能优化教程(一)
- 这可能是最好的性能优化教程(一)
- 这可能是最好的性能优化教程(二)
- 这可能是最好的性能优化教程(三)
- ThinkPHP 读取后台的数据库
- 基于gulp搭建后台(json-server)
- 这可能是最好的RxJava 2.x 教程(完结版)
- 这可能是最好的RxJava 2.x 教程(完结版)
- 这可能是不可取的!
- Coins (多重背包,较好的题)
- hdu1496 equation(较好的hash)
- ansible的安装和示例(较好)
- FaceRank,可能是最有趣的中文 TensorFlow 入门实战项目
- servlet的一个小项目(二)
- js正则表达式
- WebPack在项目配置中的探索
- ormlite框架使用
- 从一个严重的错误中恢复
- 这可能是较好的gulp实战(后台thinkphp版)
- MongoDB aggregate 聚合管道
- HBase学习笔记-统计表行数
- Uva1374 Power Calculus(快速幂计算)【IDA*】【例题7-13】
- vue自定义指令实现v-tap插件
- 短信的内容提供者
- 关于bootspart学习笔记,常用标签及作用
- Meger Sort
- leetcode 96. Unique Binary Search Trees