H5开发环境重构--拆分前后端

一、背景介绍

二、lib下目录

!QQ截图20141008104114.png!

三、前端环境搭建

• 安装nodejs, 参考官网 http://www.nodejs.org/
• 安装git ,参考 http://git-scm.com/download/
• 构建yeoman环境，第一步，安装yo

• 第二步，安装grunt bower

• 第三步，搭建一个web应用脚手架

四、构建webapp

• 环境创建好后，开始构建我们的webapp

• 运行

• 完成后目录应该如下图 !QQ截图20141008104827.png !
• 修改Grunt.js,

• bower.json用来描述前端的依赖库 可以根据文档选择自己项目依赖的库 ，然后运行

• package.json 是node的依赖描述包

• grunt.js是前端集成环境的核心，用来执行一些CSS,JS代码校验、打包的工作，可自定义

四、项目调试

• 在mobact2rd中,public文件夹下不在新增，只添加活动的后台php文件以及对应的view
• 开发过程首先依据步骤三完成静态文件的开发，然后做套页面以及后台开发
• 在webapp中做开发后，可以运行

• 在静态页面完成，在后端yaf框架中套页面时，为了本地测试方便，引用的CSS地址为

• 引用的JS地址为

• 如果页面中存在本地开发webapp中的其他地址，则在其前面全部添加

比如在本地调试中，图片地址为

在后端套页面后替换为，即可

• 这样做的好处是方便的随时进行调试
• 在手机端进行测试的话需要将webapp上传到测试环境，将webapp更新到lib项目中，上传的时候忽略node_modules文件夹，然后引用view中页面引用地址变更为

• 以移动MM项目为例，切换地址如下所示 !QQ截图20141010102006.png!

五、项目上线规范

• 由于活动页面的规则限定比较简单，css js文件都限定为一个引用地址，并且必须为压缩好的CDN地址
• 图片地址尽量上传到CDN，由于我们没有CDN的权限，无法统一上传，目前也可以直接引用lib下的images文件夹，如果图片不多的话，尽量还是上传到CDN，然后引用图片地址改为CDN地址
• 在lib中的项目上传之前，先运行

• 最终JS引用地址为上传到CDN后的地址如：

• 最终CSS引用地址为上传到CDN后的地址如：

!QQ截图20141008104852.png ! 上传文件时候忽略bower-components npm-modules文件夹