首页手记这可能是较好的gulp实战（后台thinkphp版）

这可能是较好的gulp实战（后台thinkphp版）

标签：

Html/CSS Html5 前端工具

传统开发过程中

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

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

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

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

本次项目的后台是用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数据对接