- 1、本文档共22页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
可通过设置静态服务器代理实现实时的动态编译
静态项目管理工具 - opm
Object project manager
问题
文件颗粒度 – 维护性
网络请求数 – 性能
互斥
解决方法:合并,增加编译过程
项目管理工具
有ant/maven等
处理依赖
构建项目
文档、单元测试等等
一个典型的前端项目
/jquery/jquery
/joyent/node
opm介绍
一个类似于ant/maven的代码构建工具,一个控制台程序
一个类似于apt-get/yum的代码(包含依赖)获取工具,搭配一个可自行搭建的代码中央库服务器
可通过设置静态服务器代理实现实时的动态编译
可与mercurial结合实现中央库的自动编译发布
与人人网业务无关
完全开源
/
一个opm项目
一个template-config.xml文件
doc目录 - 项目文档
lib目录 - 相关依赖库
res目录 - 资源文件(图片、flash)
test目录 - 测试
src目录 - 项目源代码
库
前端静态“库”,包括css/js/图片/swf等静态资源
严格区分“源库”与“发布库”
每个源库可选一个唯一标识,格式一个url
保持每个库的独立性,不通过路径进行依赖,通过唯一标识处理依赖
源库中只存在最小粒度的源文件
通过init命令初始化一个源库
template-config.xml 标识一个库
库
一个源库可以对应多个发布库
一个发布库对应一个源库
对于源库,发布库是无形的,源库不保存发布库的任何信息
源库与发布库之间通过link命令进行连接,有两种连接方式,本地连接和标识连接
本地连接
本地连接,发布库中直接保存了源库的本地路径
优点:无需工作区支持
缺点:每个开发人员都需要自己通过link命令建立连接;无法处理依赖
用于:独立、临时性的小项目
标识连接
标识连接,发布库中保存了源库的唯一标识
优点:只需项目创建者建立一次连接;有工作区支持,可以处理项目依赖
缺点:需要工作区支持
处理依赖 – 工作区
工作区
一个包含了多个库的磁盘目录
一个工作区中的多个库可以通过库的唯一标识进行依赖,不通过磁盘路径进行依赖
保证一个库在一个工作区中只存在一份代码,实现一处编写,处处编译。
通过load命令加载、初始化工作区
编写template-config.xml
源库的配置文件
根 package,属性url指定其唯一标识
source/library/resource 元素,每个元素对应一个目录,通过dir属性指定目录名,一般为src/lib/res
以后还会有document/test等
library的磁盘映射机制
通过指定依赖库的唯一标识,将依赖库的文件“映射”至当前库的磁盘路径上
映射后的路径可在配置文件combine/include中使用,也可以在css文件中使用
JS文件的合并 - combine
每个combine标识一个合并文件
合并文件在文件系统上的地位与最小颗粒度文件相同,即也可以被别的文件再次合并,实现多级合并
依赖库的文件也一视同仁
同样的,最小颗粒度的非合并文件也可以作为发布文件进行发布
发布库中的发布文件名与源库中相同
CSS文件的合并 - import
IE著名的import bug,且会增加网络请求数,没有人使用这个特性
发布库支持针对不同浏览器发布不同的文件,添加 -ie6-min/-ie7-min/-std-min/-all-min 等后缀(开发中)
因此,发布库中的发布文件名为源库文件名加入 -all-min 后缀,比如 core.css 对应 core-all-min.css。
发布目录结构
永远不要直接修改发布目录的文件,因为修改了源文件后,发布文件会被覆盖
发布目录中存在一个.template-info目录用于存放源库路径、编译状态等临时文件
安装步骤
/p/staticcompiler/wiki/HowToSetup
Python
flup
opm
nginx
配置nginx
命令介绍
get – 从公共代码库获取源代码
init – 初始化一个新库
compile – 编译一个css/js文件
publish – 将整个发布库进行编译
link -将发布库与源库进行映射
load – 加载本地工作区
serve – 启动一个可实时编译的静态服务器
packages/workspace/root/source/status/libs/incs
opm serve
实现动态实时编译的核心
在本机运行一个http server,将所有对发布库css/js发布文件的请求监听,发现源文件有修改则编译后返回发布文件
The End
: @宇义
mail: goto100@
文档评论(0)