RT, 前端脚手架工具, predator-kit, 采用 https://github.com/magicdawn/predator-kit https://github.com/magicdawn/generator-predator

predator-kit

• koa 做 node server, impress-router 做router
• browserify做前端模块加载器
• less做css预处理器
• swig 做服务端模板

结构目录如下

├── global
│   ├── assets
│   ├── css
│   │   └── main
│   │       └── base.less
│   ├── fonts
│   ├── img
│   ├── js
│   │   └── main
│   │       └── index.json
│   └── view
│       └── basic.swig
├── index
│   ├── assets
│   ├── css
│   │   └── main
│   │       └── index.less
│   ├── fonts
│   ├── img
│   ├── index.js
│   ├── js
│   │   └── main
│   │       └── index.js
│   └── view
│       └── index.swig

每个页面都有自己的 js css view 文件夹, 开发一个页面时, 只需保持在这个页面下完成即可

• js/main/**/*.js 请求这个, 下面的 js文件会做 browserify 处理, development环境是每次都做bundle处理, 非 main的js直接当做静态文件处理
• css/main/**/*.css 请求这样的路径, less 会被less处理成 css, 其他的做静态文件处理 非 production 环境下, 每次请求都是去重新用 browserify/less 处理的, so 没有什么所谓的watch 模式… 在 production环境下, 会使用build好的文件

npm package

• predator-kit : https://github.com/magicdawn/predator-kit
• generator-predator: yeoman generator

安装 generator

$ npm i yo -g
$ npm i generator-predator -g

使用 generator 创建一个predator 项目

$ yo predator

创建新页面

$ yo predator:page <page_name>

这样在app.js 里面, 开发的时候去加载 browserif less 的 middleware. 然后开发完成, 运行 gulp build 就build 好所需的前端资源, build 过程中是要做md5处理, 并做minfy 处理 在production环境下, 资源是做minfy 处理过的, 做过hash 处理, 可以增量更新上线, 并且maxage设为 365 * 86400 = 一年

demo

一个小应用, 作为这套工具的试验品 https://github.com/magicdawn/jshint-config-builder jshint配置生成器, http://magicdawn.magicdawn.ucloud-bj-1.goodrain.net:10080/