wowbuilder to build a single page website by wowspg


Keywords
singlepage, spg, compile;
License
MIT-feh
Install
npm install wowbuilder@0.2.26

Documentation

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