Skip to content
batch compressor for js and css, from weibo.com
JavaScript Shell
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib
node_modules
README.md
package.json

README.md

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.

Something went wrong with that request. Please try again.