wowbuilder
##关于wowbuilder
wow单页系统简介
wow单页系统可以帮助开发者快速搭建一套前端单页面应用，wow框架主要包含：
- wowspg — 前端Javascript单页面框架，单页面应用前端基础库
- wowui — 前端基础样式库
- wowbuilder — 单页面框架自动化编译工具，前端人员可以按照传统方式进行开发，由wowbuilder编译成为单页面，同时支持打包、压缩、本地测试等前端开发相关工具
- wowstyleguide — wow框架代码开发规范
wowbuiler概述
wowbuilder作为wow系统的前端自动化工具，帮助开发者完成单页应用搭建、自动化编译打包、本地测试等功能。wowbuilder源码基于node编写，运行在装有node的运行环境中。
安装
$ npm install -g wowbuilder##使用指南
###第一步，根据wowstyleguide搭建基础的模块架构文件，配置package.json文件
{
"name": "xxx",
"description": "xxx模块代码",
"version": "1.0.1",
"url": "http://xxx.com",
"author": [{
"name": "yingxuetan",
"mail": "yingxuetan@163.com"
}],
"wow": { //wowbuiler编译相关配置
"name": "xxx", //模块名
"path": "xxx", //模块在项目中得部署路径
"tasks": {
"online": { //线上代码配置
"wow-urlmap": {
"options": { //配置线上静态文件基础路径
"basePath": "http://apps.bdimg.com/developer/static/1/zhida/static"
}
}
},
"local": { //本地测试是配置
"wow-urlmap": {
"options": {
"mapOption": "local"
}
},
"jshint": { //覆盖jshint默认配置
"options": {
"debug": true
}
},
"wow-md5": false, //关闭静态文件md5重命名功能
"uglify": false, //关闭js文件压缩功能
"cssmin": false, //关闭css压缩功能
"htmlmin": false, //关闭html压缩功能
"localserver": true, //在本地server中部署
"wow-pack": false //关闭打包功能
},
"remote": { //远程服务器测试配置
"wow-urlmap": { //远程服务器静态文件路径配置
"options": {
"basePath": "http://xx.com/static/1/zhida/static"
}
},
"wow-httpupload": { //文件上传到远程服务器配置
"options": {
"url": "http://xxx.com/wow_receiver.php", //文件接收器
"method": "POST"
},
"files": [{
"expand": true,
"cwd": "./<%=dist%>/build",
"src": "./static/**/*",
"dest": "/home/usr/webroot/static/xxx"
}]
}
}
},
"router": { //路由配置
"/service": "service/src/dust/index.dust"
},
"rewrite": { //本次测试数据rewrite规则
"/aaa/bbb/data": "xxx/test/index.json"
}
}
}###第二步，执行wow命令
$ wow local
$ wow remote
$ wow online- 运行wow + 命令名，命令名为package.json 中配置的命令
###第三步，启动本地server测试
$ wow server- server为node server，默认监听本地8888端口
package.json说明
| 关键字 | 含义 |
| name | 模块名 |
| path | 部署路径，默认与name同名 |
| deps | 依赖的模块 |
| pack | 打包配置 |
| tasks | 任务配置 |
| router | 路由正则到模板的映射 |
| entrance | 入口文件 |
| rewrite | 本地测试的rewrite规则 |
前端模板编译语法说明
| 关键字 | 含义 | 属性 |
| block | 页面片段的定义 | name: block 名字 tag: block最外层标签 sync: 是否为同步模板 |
| extend | 模板继承 | file: 父级模板path |
| title | 页面标题 | name: 页面标题内容 |
| spgmain | 单页面配置导入位置 | var: 单页配置导入到的变量名称 |
block标签内部，标签使用说明：
| 标签名 | 含义 | 属性 |
| datasource | block数据源 | href: 数据源url |
| link | 样式表，可直接使用.less | href: 样式表path |
| script | 页面脚本文件 | src: 脚本path handler: dt|start|ready|usable 表示处理器的类型 |
例：
配置文件的router配置：
"router": {
"/aaa": "aaa/src/dust/index.dust"
}模板文件：
//layout.dust文件
//outer表示，父级模板不在当前模板
{%extend name="outer"%}
{%block name="main"%}
{%block name="service-main" class="m-service-index-wp yh"%}{%/block%}
{%/block%}
//index.dust文件
{%extend file="aaa/src/dust/layout.dust"%}
{%block name="aaa-main" class="m-aaa-index-wp"%}
<datasource href="/aaa/bbb/data">
<link rel="stylesheet" type="text/css" href="aaa/src/less/index.less">
<script type="text/javascript" src="aaa/src/js/handler/index.js"></script>
{%/block%}编译后产出配置文件：
define(function () {
return {
"block": {
"main": {
"block": {
"aaa-main": {
"tpl": "",
"sync": "no",
"handler": {},
"selector": "#wowBlockaaa-main1"
}
},
"tpl": "aaa/src/dust/wow_block_layout_main2",
"sync": "no",
"handler": {}
}
},
"router": {
"/aaa": {
"block": {
"aaa-main": {
"tpl": "aaa/src/dust/wow_block_index_service-main0",
"css": ["aaa/src/less/index"],
"ds": "/static/1/community/light/config/service_index.json",
"sync": "no",
"handler": {
"ready": ["aaa/src/js/handler/index"]
}
}
}
}
}
};
});目前集成的功能列表
| 名称 | 说明 |
| clean | 文件清除 |
| copy | 文件复制 |
| less | less文件编译 |
| csslint | css错误检测 |
| jshint | js错误检测 |
| dust | dust模板编译 |
| string-replace | 文件字符串替换 |
| uglify | js代码压缩 |
| cssmin | css代码压缩 |
| htmlmin | html代码压缩 |
| imagemin | 图片文件压缩 |
| beautify | 代码美化工具 |
| watch | 文件修改监听 |
| wow-spg | 将单页面模板文件编译成wowspg配置文件 |
| wow-wrap | 对commonjs规范书写的文件进行amd包裹 |
| wow-urlfix | 前端静态文件引入路径替换 |
| wow-urlmap | 生成线下文件路径到线上静态文件路径得映射 |
| wow-pack | 处理文件的打包配置 |
| wow-requiremap | 生成amd的id映射 |
| wow-addrequiremap | 将requiremap添加到模板文件 |
| wow-httpupload | 进行代码文件的上传 |
| wow-httpserver | 开启本地node http server |
