构建可扩展的静态资源管理系统<br />许阳寅@淘宝<br />
关于我<br />许阳寅(文河@淘宝)<br />f2e.us<br />yyfrankyy@gmail.com<br />
静态资源管理<br />常见功能<br />预编译其他资源(LESS/Sass,CoffeeScript)<br />规范检查,语法检查,安全检查<br />Sprite<br />合并,压缩<br />各自实现 VS 系统化处理<br />
现有系统<br />facebook的静态资源管理系统<br />跟php深度集成,组件跟JS/CSS/Image绑定<br />依赖分析,本地化,合并,sprite,压缩<br />伸缩性,自我学习<br />百度的前端编译平台<br />统...
淘宝现有的RMS系统<br />编译TMS模板<br />语法检查(js)<br />安全检查(php/image)<br />编码转换<br />压缩<br />
为何需要更进一步<br />需求<br />产品线众多,构建规则不同<br />每周发布量大<br />处理文件的方式大不一样<br />目标<br />快速稳定<br />可扩展<br />可配置<br />
快速稳定<br />实现调度中心,集中控制容错,反馈日志<br />异步工作流(NodeJS)<br />
可扩展<br />各种语言实现的预处理工具<br />YC/GC: Java<br />CSSGaga: .NET<br />LESS/CoffeeScript: NodeJS<br />使用NodeJS和其他平台进行异步通信<br />Nod...
可配置<br />{“type”: “JavaScript”<br />,“steps”: [<br />   [“coffeescript”, {}]<br /> ,[“nativeascii”, {}]<br /> ,[“compresso...
和应用集成(自动时间戳)<br />后端:发布时同步生成时间戳文件<br />前端:importAssets(“apps/tms/js/spm.js”)<br /><ul><li><script src=“http://<?phpcdn(); ...
<script src=“http://a.tbcdn.cn/apps/tms/js/spm.js?t=1”></script>
<script src=“http://assets.daily.taobao.net/apps/tms/js/spm.js?t=$random”></script></li></li></ul><li>下一步<br />处理粒度<br />单...
几点特性<br />拦截应用Assets入口<br />配置预处理过程<br />利用NodeJS的模块资源和异步特性进行流水线组装<br />
Upcoming SlideShare
Loading in...5
×

构建可扩展的静态资源管理系统

2,279

Published on

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,279
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

构建可扩展的静态资源管理系统

  1. 1. 构建可扩展的静态资源管理系统<br />许阳寅@淘宝<br />
  2. 2. 关于我<br />许阳寅(文河@淘宝)<br />f2e.us<br />yyfrankyy@gmail.com<br />
  3. 3. 静态资源管理<br />常见功能<br />预编译其他资源(LESS/Sass,CoffeeScript)<br />规范检查,语法检查,安全检查<br />Sprite<br />合并,压缩<br />各自实现 VS 系统化处理<br />
  4. 4. 现有系统<br />facebook的静态资源管理系统<br />跟php深度集成,组件跟JS/CSS/Image绑定<br />依赖分析,本地化,合并,sprite,压缩<br />伸缩性,自我学习<br />百度的前端编译平台<br />统一化执行脚本<br />规范检查,安全检查<br />CSS3<br />模板检查,HTML压缩<br />自动时间戳<br />
  5. 5. 淘宝现有的RMS系统<br />编译TMS模板<br />语法检查(js)<br />安全检查(php/image)<br />编码转换<br />压缩<br />
  6. 6. 为何需要更进一步<br />需求<br />产品线众多,构建规则不同<br />每周发布量大<br />处理文件的方式大不一样<br />目标<br />快速稳定<br />可扩展<br />可配置<br />
  7. 7. 快速稳定<br />实现调度中心,集中控制容错,反馈日志<br />异步工作流(NodeJS)<br />
  8. 8. 可扩展<br />各种语言实现的预处理工具<br />YC/GC: Java<br />CSSGaga: .NET<br />LESS/CoffeeScript: NodeJS<br />使用NodeJS和其他平台进行异步通信<br />NodeJS社区丰富的模块资源<br />
  9. 9. 可配置<br />{“type”: “JavaScript”<br />,“steps”: [<br /> [“coffeescript”, {}]<br /> ,[“nativeascii”, {}]<br /> ,[“compressor”, {“type”: “UglifyJS”}]]}<br />{“type”: “CSS”<br />,“steps”: [<br /> [“less”, {}]<br /> ,[“compressor”, {“type”: “YC”}]]}<br />
  10. 10. 和应用集成(自动时间戳)<br />后端:发布时同步生成时间戳文件<br />前端:importAssets(“apps/tms/js/spm.js”)<br /><ul><li><script src=“http://<?phpcdn(); ?>/apps/tms/js/spm.js?t=<?php require_once(‘timestamp/apps/tms/js/spm.js.php’); ?>”></script>
  11. 11. <script src=“http://a.tbcdn.cn/apps/tms/js/spm.js?t=1”></script>
  12. 12. <script src=“http://assets.daily.taobao.net/apps/tms/js/spm.js?t=$random”></script></li></li></ul><li>下一步<br />处理粒度<br />单个文件<br />整个应用打包<br />自动构建文件(wscript, package.json)<br />和性能中心对接<br />
  13. 13. 几点特性<br />拦截应用Assets入口<br />配置预处理过程<br />利用NodeJS的模块资源和异步特性进行流水线组装<br />
  14. 14. 谢谢<br />Q&A<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×