三个月前换了工作，刚接手新公司的代码时，瞬间有种从天堂到地狱的感觉，目录结构混乱不堪，代码质量堪忧，中间夹杂着大大小小的坑，上线的代码也是没有经过仔细优化，在此基础上开发简直如履薄冰，痛苦不堪，刚开发完一个需求，就已经完全受不了这种开发模式，于是立马着手建立一套完善的前端开发流程。
技术选型
因为是基于 H5 的前后端分离项目，主要用于微信等移动端浏览器及 App 中的 Webview，因此着眼点主要有几个方面。
- 很好的适配 Android 和 IOS 中的 Webview，兼容各主流移动浏览器包括微信，同时 PC 上也可供查看使用。
- 需要提高开发效率，复用公用代码，进行模块化及组件化。
- 能够快速部署测试环境，快速上线。
下面就逐个介绍下使用的一些解决方案。
构建工具选择了 gulp + webpack，关于 gulp 的使用网上已经有大量教程，之前也写了点使用心得。webpack 主要用于组件化的构建。（webpack 的使用后续总结）
HTML 方面使用了模板语言 Jade，主要用于 HMLT代码片段的复用继承等等，之前的项目使用了 nginx 的 SSI 来复用部分 HTML 代码，但 SSI 过于简单，性能也有所损耗。
CSS 使用了使用了预处理语言 SASS + Autoprefix，由于构建速度过慢，抛弃了 Compass。
部署方案采用了常用的 CI 系统 Jenkins 作自动化构建发布方案，配合 gitlab 的 Webhook 及 SSH 插件，让开发人员只需要提交代码，后续的构建及发布流程完全自动化，解放了开发及运维的生产力。
移动开发相关
之前一直在做 PC 项目，虽然流量不是很大，但是项目完全的前后端分离，架构也比较复杂，前端部分有大量的逻辑处理，从前端路由到 MVC，再到构建，这种 PC 上的 SPA 应用，更注重用户交互及体验，涉及不少数据交互。
而移动端的 HTML5 虽然也采用的是前后端分离的方案，但更多的只是简单数据的渲染，并没有太多的交互，因而架构相对简单的多，其主要的关注点在于多屏幕的适配，性能的优化及如何与客户端 App 进行交互上面。
屏幕适配
多屏幕的适配其实之前也做过一些使用 Media Query 进行响应式开发的方式，单实际开发中遇到不少问题，首先是设计师在设计时需要考虑不同尺寸的手机屏幕，其次是在各种屏幕分辨率下要做不少 hack 来 fix 不同的设备 dpr 带来的问题（比如如何显示物理上的 1px ）。正好遇到手淘的 Flexible 方案，实践了一下发现能解决上面的两个问题，同时手淘自己也在用这套方案，便以此做为目前 H5 的适配上的解决方案，实际使用中很爽，但也用不少小坑（后续总结，继续给自己挖坑！！！）。
SPA vs 多页面
之前在 PC 上做过 SAP 和多页面混合的模式，对两种模式算是都有了解。SPA 有更好的用户体验，但需要添加前端路由器，在架构上稍微复杂了一些。由于我们的移动站，活动营销页面居多，因此目前还是采用了多个独立页面的模式，方便开发。
性能优化
移动端网络环境很复杂，加上手机浏览器性能差异比较大，因此极致的性能优化也是必须的。（继续填坑）。