1.1 所谓的实时? 编写调试CSS代码时,完成合图以及生成图片输出配置,并完成CSS属性解析和替换。 传统的合并方法: 手动合并图片,修改css,效率低下滞后 编译阶段统一的处理替换?无法实时预览效果,有效果不一致风险 实时合并优势: 杜绝了线上线下图片,css文件不一致的风险 优化了前端编译流程,节省编译时间 生成文件更可控(取消版本号,MD5化 etc..)
1.1 所谓的实时? 编写调试CSS代码时,完成合图以及生成图片输出配置,并完成CSS属性解析和替换。 实时合并优势: 杜绝了线上线下图片,css文件不一致的风险 优化了前端编译流程,节省编译时间 生成文件更可控(取消版本号,MD5化 etc..)
1.3 实现方案,处理流程? 通过REWIRTE静态资源的请求地址 指向的PHP处理并动态生成新的可控的资源 处理流程: step1 css,image,js rewrite step2 Route class handle, parser proceed step3 generate content/304 not modify step4 output, set header
1.4 css解析的缓存策略 css解析是整个过程中消耗最大的一块,保证实时开发效率对解析过并无修改的模块内容进行必要的缓存 缓存策略,按步骤优先级逐渐降低 step1 检查合并大图是否有修改 step2 检查小图配置是否有修改(SVN合并) step3 检查CSS文件是否有修改 step4 检查是否存在CSS解析缓存 step5 return
2.2 实现概述 通过shell脚本完成分支更新,新建,编译,提交操作 每一次新建分支所做的事: 从SVN拉取分支代码,cp到lighttpd的访问目录中 每隔5s脚本更新一次SVN代码 编译阶段生成临时build目录,访问build.xxx时指向到该地址 网站提交,即将该目录下代码提交到SVN的build目录中
2.2 实现概述 线上目录结构, lighttpd,include-shell = branch.sh 开发预览环境: 分支名/wwwdata.test/webroot 编译预览环境: 分支名/wwwdata.build/webroot 源代码目录: 分支名/src/rd-main 分支名/src/fe-main/app/fm