Zebra    前端一体化解决方案

模板注入

文件名加md5

内置uglify,js压缩混淆,css压缩

模块打包合并

自动监听js修改,重新构建

一键发布到服务器

模块化辅助

安装zebra



免安装
1安装 nodejs,https://nodejs.org/

2下载zebra.js

3将zebra.js拷贝到项目根目录



npm安装
名字被占用,暂时未发布到npm

开始使用


#输入node zebra.js -w,回车

>

命令行参数说明:

-w   监控模块,当有文件发生改变的时候,自动重新构建
-d   将本地文件发布到服务器

使用__inline()

在js代码中


zebra编译之后,会把模板中的内容嵌入到js中:

配置文件

zebra-config.json放到与zebra.js同级目录

zebra-config.json

				
	{
		"base": "./src",        //代码目录
		"output": "./static",   //输出目录
		"rules": {
			"js": {
				"compile": false,   //模块化欲编译
				"uglify": false,    //uglify压缩
				"md5": {            //有md5属性,js文件名会加上md5
					"exclude": []   //md5排除的文件
				}
			},
			"css": {
				"compress": true,   //压缩
				"md5": {            //有md5属性,js文件名会加上md5
					"exclude": []   //md5排除的文件
				}
			},
			"html": {
				"resourceMap": true //将resourceMap注入到html页面中,在resourceMap中可以找到文件对应的打包或者是加md5之后文件
			},
			"image": {},
			"other": {
				"copy": true       //拷贝其他的文件
			}
		},
		"deploy": [{    //发布代码到服务器
			"receiver": "http://cq02-map-sv-control04.cq02.baidu.com:8890/receiver.php",   //服务器接受文件
			"from": "./static",     //源目录
			"to": "/home/map/odp_crm/webroot/mobile-framework",  //目的目录
			"exclude": "svn|rar|psd|docx"  //排除文件 *.svn, *.rar
		}],
		"clean": true            //清空输出目录
	}
				
				







问题 & 意见 & bug反馈