Febu

前端构建工具

• 安装
• 发布
  • 参数
  • 发布到测试环境
  • 发布到生产环境
• 约定规则
  • inc
  • html
    • _group示例
    • _inline和_compress示例
  • febu.json
• 测试

安装

0. 命令行窗口需要能执行git命令
1. 编辑config/default.js并另存为config/local.js （可选步骤）
2. 安装依赖
   • npm install -g gulp
   • npm install

发布

仅支持发布git项目

参数

• repo git仓库地址
• branch 分支，默认是master
• commit 版本号，默认是HEAD
• publicPath 静态资源前缀，默认从项目的febu.json里取

发布到测试环境

gulp development --repo repo [--branch branch] [--commit commitid] [--publicPath publicPath]

例如发布项目amd_demo的master分支的最新代码

gulp development --repo https://github.com/holyzfy/trygit

发布到生产环境

gulp production --repo repo [--branch branch] [--commit commitid] [--publicPath publicPath]

约定规则

inc

inc目录存放html碎片，html碎片里的静态资源路径是相对于仓库根目录

html

html文件里script，link标签可以使用以下属性（生产环境下有效）

| 属性 | 描述 | | :------- | :-------- | | _group | 合并多个标签的外部资源 | | _inline | 把静态资源的内容直接输出到页面 | | _compress | 与_inline配合使用，输出压缩后的内容 |

_group示例

对于同一个页面，_group值一样的link标签合并到一起，_group值一样的script标签合并到一起

原始代码

<link rel="stylesheet" href="style/common.css" _group="all">
<link rel="stylesheet" href="style/index.css" _group="all">

处理后

<link rel="stylesheet" href="//img1.febucdn.com/my_project/style/all.f9e3196e67.css">

_inline和_compress示例

原始代码

<script src="js/config.js" _inline _compress></script>

处理后

<script>
require.config({waitSeconds:0,shim:{highcharts:["jquery"],highcharts_more:["highcharts"],url:{exports:"url"},"jquery.pagination":["jquery"],"jquery.event.drag":["jquery"],"jquery.validate":["jquery"],"jquery.validate_common":["jquery.validate"]},paths:{arttemplate:"//img1.febucdn.com/f2e/my_project/js/arttemplate-404a5647dd",common:"//img1.febucdn.com/f2e/my_project/js/common-77fc0b9010",detail:"//img1.febucdn.com/f2e/my_project/js/detail-35cbe12497"}});
</script>

febu.json

项目根目录下创建febu.json，来指定部署的配置项（所有配置项都是选填），示例：

{
    "build": "./build.js", // requirejs的构建脚本，示例 https://github.com/holyzfy/amd_demo/blob/master/build.js
    "ignore": [             // 忽略的文件或目录
        "node_modules",
        "build",
        "build.js",
        "test"
    ],
    "development": {      // 发布到测试环境时静态资源前缀
        "publicPath": "//static.f2e.example.com/project"
    },
    "production": {     // 发布到生产环境时静态资源前缀
        "publicPath": "//examplecdn.com/project"
    }
}

测试

0. 安装依赖 npm install -g mocha
1. 运行 npm test