#weibo-packager 新浪微博前端打包系统:批量压缩,合并js,css. 内置服务器支持开发环境或者仿真测试环境,并可在线部署工程.

#通过npm安装: npm install weibo-packager

##git仓库地址: https://github.com/dongyuwei/weibo-packager.git

#处理步骤(部分特殊处理未罗列,具体可参见源码): ##对js工程(如t4/home等):

1. 遍历所有目录,收集到所有js和非js文件;
2. 配置输出目录,使其内部保持和输入文件夹内部相同的目录结构;
3. 批量压缩(格式化)所有js;
4. 批量合并所有$import的js,并且排除重复$import.
5. 合并后的js写入到目标目录下;写的同时计算其md5 hash值,并且生成一个新文件(路径中包含md5值).
6. 最后copy所有非js文件.copy的同时计算其md5 hash值,并且生成一个新文件(路径中包含md5值).
7. 中间会通过遍历AST语法树查找require(require.register or rm.register),最终生成的映射文件插入base.js的尾部,异步请求该文件时会动态替换.
8. md5_mapping.json为所有文件的路径与其md5 hash值的映射;该文件输出到目标根目录下.

//支持下面2种形式的$import来引入依赖js文件,基准目录为xxx_project/js/conf/
$import('a.b.c'); //import xxx_project/js/a/b/c.js
$import('a/b/c.js');//import xxx_project/js/a/b/c.js

##对css工程(如t4/style或者t4/skin等):

1. 遍历所有目录,收集到所有css和非css文件;
2. 配置输出目录,使其内部保持和输入文件夹内部相同的目录结构;
3. copy所有非css文件(图片等)并且计算其md5 hash值;
4. 读取所有css文件内容
5. 批量压缩(格式化)所有css;
6. 批量合并所有css(@import的css),并且排除重复@import,保留最后一个@import;
7. 合并后的css写入到目标目录下;写的同时计算其md5 hash值,并且生成一个新文件(路径中包含md5值).
8. md5_mapping.json为所有文件的路径与其md5 hash值的映射;该文件输出到目标根目录下.

#工具列表:

lib/js/main.js 压缩合并js工程,如home工程

Usage:

node lib/js/main.js fromDir toDir [projectPath] [-verbose] [-onlyConf] [-confSpecial][-mangle][-squeeze][-noMD5]

• projectPath 参数形如't4/home , t4/webim , t4/apps/data 等',当有-noMD5时projectPath可省略.

• 兼容目前的使用方式时应该使用 -onlyConf -confSpecial这两个选项 如 node js/main.js input/home/ output/home t4 -onlyConf -confSpecial

• 压缩优化的主要选项是-mangle和-squeeze

• 可选参数列表: -verbose or -v 显示详细log日志.为加快速度,默认不输出详细日志,只显示警告和严重错误信息. -onlyConf 只合并'/conf/'目录下js文件.默认合并所有文件. -confSpecial 把'/conf/'目录下文件提前输出到到'/conf/'的父目录. 如home/conf/base.js 合并后输出为home/base.js -mangle 混淆变量 -squeeze 进一步压缩js. -beautify 格式化代码(可用于排错) -noMD5 不做MD5处理

lib/css/main.js 压缩合并css工程,如style工程

Usage:

node lib/css/main.js fromDir toDir [projectPath] [-verbose][-noMD5]

• projectPath 参数形如't4/style , t4/skin , t4/appstyle/webim 等',当有-noMD5时projectPath可省略.
• 参数列表: -verbose or -v 显示详细log日志.为加快速度,默认不输出详细日志,只显示警告和严重错误信息. -noMD5 关闭md5处理. 默认进行css和图片等资源的md5计算及路径替换.

lib/js/combineOne.js 合并单个js文件

lib/css/combineOne.js 合并单个css文件

lib/server/httpd.js 一个nodejs服务器,可以替代apache+php做开发环境支持(支持开发测试,仿真测试,能从线上环境自动加载不存在的工程/文件)

httpd.js很智能,目标工程文件存在时,会自动判断是开发模式还是仿真模式;目标文件不存在时,会自动从线上环境(代理)请求.
几点约定:   
1. 根据工程根目录下是否存在名为 .packaged.txt 的文件来判断工程是否是压缩合并过的.
2. 如果是压缩合并过的工程(根目录下存在名为 .packaged.txt 的文件),则走仿真模式(直接读取打包合并后的静态资源);
3. 否则为开发模式(按需合并单个js/css文件);
4. 工程文件根本不存在时自动反向代理到线上资源.

lib/server/config.js 服务器配置选项,请察看源码中文档注释.

• documentRoot,默认指向/data1/wwwroot/js.wcdn.cn
• workerNum,默认为10,即启动10个worker子进程作为服务器子进程
• autoProxy,默认true,即自动代理请求未部署的工程.

#用例(参数可用于线上生产环境):

打包压缩合并t4/home 工程:

  node lib/js/main.js input/home/ output/home/ t4 -onlyConf -confSpecial -mangle -squeeze 

打包压缩合并t4/style 工程:

  node lib/css/main.js input/style/ output/style/ t4 

打包压缩合并t4/skin 工程:

  node lib/css/main.js input/skin/ output/skin/ t4 

4 启动httpd服务器(部署于虚拟机或者本机,支持微博前端js||css开发):

     nohup node lib/server/httpd.js &

#其他说明

1. 本系统在mac和centos上测试通过: mac node 版本为v0.6.9; CentOS 5.4 上 node 版本为 v0.6.10
2. 系统内置uglify-js版本已经升级到1.2.6
3. 由于历史原因(兼容微博目前的前端架构),对js工程下/conf/目录读写需要特殊处理,阅读源码时请注意.

#北京node-party交流会上对weibo-packager的一些简介和nodejs开发tips分享 https://github.com/downloads/dongyuwei/weibo-packager/nodeparty-dongyuwei-6-11.pdf #Legal

weibo-packager is licensed under the Apache 2.0 license.