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

许阳寅 @ 淘宝

关于我 许阳寅（文河 @ 淘宝） f2e.us yyfrankyy@gmail.com

静态资源管理 常见功能

预编译其他资源（ LESS/Sass ， CoffeeScript ） 规范检查，语法检查，安全检查 Sprite 合并，压缩

各自实现 VS 系统化处理

现有系统 facebook的静态资源管理系统

跟 php 深度集成，组件跟 JS/CSS/Image 绑定 依赖分析，本地化，合并， sprite ，压缩 伸缩性，自我学习

百度的前端编译平台 统一化执行脚本 规范检查，安全检查 CSS3 模板检查， HTML 压缩 自动时间戳

淘宝现有的 RMS 系统 编译 TMS 模板 语法检查（ js ） 安全检查（ php/image ） 编码转换 压缩

为何需要更进一步 需求

产品线众多，构建规则不同 每周发布量大 处理文件的方式大不一样

目标 快速稳定 可扩展 可配置

快速稳定 实现调度中心，集中控制容错，反馈日志 异步工作流（ NodeJS ）

可扩展 各种语言实现的预处理工具

YC/GC: Java CSSGaga: .NET LESS/CoffeeScript: NodeJS

使用 NodeJS 和其他平台进行异步通信 NodeJS 社区丰富的模块资源

可配置{“type”: “JavaScript”,“steps”: [ [“coffeescript”, {}] ,[“nativeascii”, {}] ,[“compressor”, {“type”: “UglifyJS”}]]}

{“type”: “CSS”,“steps”: [ [“less”, {}] ,[“compressor”, {“type”: “YC”}]]}

和应用集成（自动时间戳） 后端：发布时同步生成时间戳文件 前端： importAssets(“apps/tms/js/spm.js”)<script src=“http://<?php cdn();

?>/apps/tms/js/spm.js?t=<?php require_once(‘timestamp/apps/tms/js/spm.js.php’); ?>”></script>

<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>

下一步 处理粒度

单个文件 整个应用打包

自动构建文件（ wscript, package.json ） 和性能中心对接

几点特性 拦截应用 Assets 入口 配置预处理过程 利用 NodeJS 的模块资源和异步特性进行流水线组装

谢谢 Q&A