node package manager

febu

Febu

前端构建工具

Build Status Dependency Status

安装

  1. 命令行窗口需要能执行git命令
  2. 编辑config/default.js并另存为config/local.js (可选步骤)
  3. 安装依赖
    • 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_demomaster分支的最新代码

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"
    }
}

测试

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