hrf(husor fed)

h5前端编译工具

特点

• 基于简单约定
• 支持es6语法,模块化,less,公共layout,局部模板,css自动补全兼容浏览器
• 支持自动生成业务代码 hrf new <业务代码相对路径>
• 开发时自动生成可以发布的页面、编译less、压缩css、检查js、合并js、压缩html、静态文件md5……全部搞定
• 不依赖插件，直接引入livereload，并且不会出现less没有编译完，页面已经刷新
• 所有的一切只需要在项目根目录下运行 hrf server（因为监听80端口，mac下要sudo hrf server）

使用说明

1.安装

npm install hrf -g --registry=http://registry.npm.taobao.org

项目根目录下运行

npm install [email protected] --save

2.运行

当前项目根目录下运行命令行

hrf server (mac下加sudo)

3.新建业务

当前项目根目录下运行命令行

例如:

hrf new index/index

返回结果如下,会帮你创建相应的静态资源,之后就可以打开浏览器开发了

views/src/index/index.html
static/index/index/index.js
static/index/index/index.less
打开浏览器 local.beibei.com/index/index.html 开发吧

4.发布

页面开发完了,包括production下的文件夹提交svn即可

FAQ

1.模块化

支持common.js 规范,除此之外还支持require less文件和html文件,更彻底的模块化

2.约定

静态资源约定 每个业务中静态资源都需要一个index.js 和 index.less 作为入口

3.css 自动补全

例如less中:

p{
   display: flex 
}

编译后的css

p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

4.javascript的debugger

不用在babel编译后的js上debugger,通过sourceMap,调试可以直接在源文件上调试

5.区分新老业务

新的html在view/src目录下,static保持不变

6.默认 layout

layouts目录下的index.html

7. 在mac production 文件可能被locked

项目根目录下运行

sudo chmod -R 777 production

7. 访问即将发布上线的production文件

只需要在开发页面中加入quaner

例如:

http://local.beibei.com/quaner/index/index.html