微博前端开发工具 by nodejs

1. nodejs在新浪微博前端打
@月明沧海

2. 系统简介
js批量压缩合并系统
css批量压缩合并系统
发及仿真测试支 系统
在线部署仿真环境工具
动态文件合并服务
安装: npm install weibo-packager

3. js批量压缩合并
$Import(‘a.b.c’); //加载依赖文件.
遍历输入目录,收集js和非js文件
配置输出目录,保持和输入目录相同结构(微调)
先使用uglify-js压缩单个js
解析提取 $Import 再合并js文件
写文件,同时计算其md5
遍历js 语法树来提取 步加载的文件路径

4. js批量压缩合并
正则替换$Import,合并js. 剔除重 $Import

5. 挑战:提取 步加载文件
使用uglify-js遍历js语法树,提取(替换) 步加载的js路径
为md5后的文件路径(要防止该语句被混淆替换).

6. uglify-js遍历AST
在线演示: http://files.zhaojie.me/demos/js-parsers/
uglifyjs-parser.html

7. uglify-js动态修改js AST
AST一次性生成,但可多次遍历,修改.
遍历ast获取信息比 杂的正则表达式简单可靠
修改后的ast可以gen_code 产生新js源码.
pro.ast_add_scope可防止原ast被修改.遍历会生成新ast.

8. esprima
esprima is a js parser in js.
ast结构更清晰,可读性更好.
解析速度更快.
parser demo: http://esprima.org/demo/
parse.html
语法高亮demo: http://esprima.org/demo/

9. 合并js 小问题
多个文件均以函数闭包封装,但可能没有以’;’分
号结束.解决方法:合并后文件以’;n’间隔. 这能
预防该问题,且合并了几个文件就是几行,一目了
然.
uglify-js在1.2.6版才有字符串相加合并优化(对
大量模板字符串很有益处)
需仔细斟酌uglify-js各项优化选项(微博 闭了
make_seqs优化 )

10. css批量压缩合并
@import‘../../modele/base/reset.css’;//css引用
遍历输入目录,收集css和非css文件
配置输出目录,保持和输入目录相同结构
制非css文件(图片等),并计算其md5
读取所有css文件
合并css,同时剔除重 @import文件
剔除重 css rule(实验性功能)

11. 挑战:剔除css重
css解析有严格先后顺序(不同于js),有重
@import时只能去掉前面的@import,只保留最后
一个@import
解决方法:先建立@import树;再深度优先遍历该
树,剪除重 叶节点.
@import正则表达式需要兼容各 形式(浏览器

12. 剔除重 css规则
按’}’来切分css规则
排重处理(只保留相同规则的最后那条规则)

13. 合并css时重新计算背景
先计算背景图片相当于原css文件的绝对路径;
再计算背景图片绝对路径与合并后的css文件的
相对路径.
path.relative 用于计算相对路径很方便

14. css压缩合并tips
@import语句末尾的’;’分号必须替换干净.否则
紧临其后的那条css规则会失效.
@charset声明语句必须以分号结尾.否则可能会
样式错乱.
IE浏览器下单个css规则数量有限制(4096?),所
以单个css文件不能太大,否则会有 染问题.

15. 合并文件-去utf-8 bom头
不去掉bom头文件合并后会导致乱码(IE?)
str.replace(/^xefxbbxbf/,’’);
js,css,html均需考虑去掉bom头.
<meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8” />

16. 发,仿真一体化服务器
自动识 发环境,仿真环境
自动代理不存在的工程资源
cluster--master--worker

17. nodejs proxy功能的演化
1 最初使用http.createClient实现
2 继而使用pipe接口简化代码
3 目前使用http.request重新实现
pipe和on,addListener可以并存

18. tips
bodyParser中间件与proxy冲突(解决方案:缓存POST内
容,然后使用querystring解析参数)
process.title mac系统不可用,linux下可用 (process.title
= 'weibo-ria-server';)
dns.resolve 与 dns.lookup 对本机hosts处理不同.
console.time与consle.timeEnd计时
大坑: Cannot spawn(or fork) a ‘node’ child process
from within a cluster worker in Node v0.6.18

19. 重启nodejs服务器
设置主进程名称,记录主进程pid (.pid文件)
主进程退出时杀死所有子进程
根据主进程pid或者名称杀死主进程,进而杀死所有子进
程
任意目录下执行restart.sh时,日志都重定向到约定位置
‘SIGTERM’ VS ‘SIGKILL’ (kill VS kill -9)
‘SIGTERM’信号可以被捕获,process ‘exit’事件也会触

20. 重启nodejs服务器

21. 动态文件合并服务
文件合并服务可以充分利用nodejs chunked输
出, 流式读取,pipe到http应答.可以边读取边发
送;不用合并后再发送.

22. 在线部署仿真环境
chunked输出时,设置Content-Type时必须指明
charset,否则浏览器不即时 染.(设置charset后
不必满1024字节,浏览器就能实时 染)
demo: https://gist.github.com/2419203

23. 在线部署仿真环境

24. tips
nodejs spawn的node进程必须有明 exit code,否则其exit
事件不会被触发.
require('child_process').spawn(process.execPath || 'node',
['export','--non-interactive','--trust-server-cert','--
force','--username',name,'--
password',passwd,svn,source]);
svn export --non-interactive --trust-server-cert --force
--username xyz --password zyx svnURI

25. tips
console.log 严重影响性能(50%? 看场景)
log必须严格分级处理,一般只输出warn和error
日志
md5 流式读取与整体读取的hash一致
(require('crypto').createHash('md5').update(dat
a).digest("hex"))

26. tips
util.format可做简单模板变量替换
__dirname
__filename
独立自包含静态服务

27. tips
JSON.stringify.length === 3;
JSON.stringify(obj,null,3) 美化(缩进结构)输出
v8支持ECMA5标准,不用考虑兼容性. [].filter
[].forEach, Object.keys ...
connect 显示目录列表的插件不支持IE6
https://github.com/senchalabs/connect/
issues/531
sh.js (http://shjs.tuton.fr) 是 步执行系统命
令的(process.nextTick),和同步代码结合时需要

28. 用到的 源组件
uglify-js git@github.com:mishoo/UglifyJS.git
arguments http://github.com/fczuardi/node-
arguments
express git://github.com/visionmedia/express

29. 其他nodejs项目
邮件发微博,基于haraka(nodejs smtp server)
http://code.google.com/p/mail2http/
cloud9 ide (http://session.im:5555)

30. Thank U,Man!
@老狗 始戒烟
@FlashSoft
@貘吃馍香