你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
二哲|风变科技

这可能是较好的gulp实战(后台thinkphp版) 1个回复 专栏 @ 工具

二哲|风变科技 发布于 1 年前

传统开发过程中

可能你写好了前端页面,给后台去套,你就没啥事了

又或者,你可能需要在你的前端页面写上各种后台模板代码,对于我这种前端洁癖,简直不能忍!

本文将介绍一种前后端分离的方式,但又能保留着前端能使用后台代码的兼容性

既然决定了这种开发模式,我们最先设计的应该是从目录开始

本次项目的后台是用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部分比较简单

css

csspath就是你src下的路径,如果我们要发布则执行压缩css代码 minicss,否则项目越大task每次执行时间就越长,简直不能忍

二、js部分,我们新增了两个replace的方法

css

第一个情况是我们在js文件里写的ajax请求,也会需要一些路径替换,如果前端是用node做分层,那我们能直接写自己的前端请求进行模拟,但是最后线上的请求路径肯定是不同的,我们就可以做个替换为线上请求

第二个replace是在js中可能写有背景图片,或者src的地址,我们也需要替换

三、HTML部分

css

我们需要用gulp-rev替换静态文件版本号

同样html里可能存在js代码需要替换请求路径

html里我们会直接使用相对路径,线上需要替换为类似PUBLIC这样的路径

我们的a标签跳转地址也可能需要替换。比如以前可能写PHP里的U方法

最后我们还会在页面引入js测试数据,发布的时候需要把这个js的引用删除,这里我用的插件是gulp-html-replace

当然换成别的文件都是可以的,可自行搭配

以下是src里的文件下和输出目录文件对比

css

css

css

css

PS:剩下的还有可能有imgs文件,iconfont文件,大家都能利用这个思路进行输入输出

PS:另外这里就不例举js和css预处理了,大家一样能自行拓展

四、关于开发和调试

开发过程中我们需要一直开着的两个task

css

现在如果还用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

登录后回复,如无账号,请使用邀请码注册