发一个前端脚手架, 关键词 koa browserify less swig
发布于 3 年前 作者 magicdawn 3242 次浏览 最后一次编辑是 2 年前 来自 分享

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

安装 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/

6 回复

沙发…消灭0回复

predator 捕食者, drone的一种, 很强大有木有~ 基本就是之前实习的时候, 前端老大的做法

各有利弊

@i5ting 啊,哪方面

@magicdawn

  • index
  • global

这样是按照页面和功能拆分的模块,每个里面又放css/img/js等,类似于模块化的东西,开发是清晰了,但部署和优化的难度加大了

@i5ting

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

部署 & 优化: 目前这个 predator-kit 工具是带build功能的, 是一堆函数, 然后在 gulp file 里面去调用这些函数, 然后有一个 yeoman-generator, 自动去生成这个 gulpfile , 可以在本地 build 好, build的结果全是静态文件, 把build好的文件也包括进 git仓库, 一起提交就是, 也可以在production 环境去build, 采用git部署也就是简单的 commit push pull的过程, 所以我感觉部署应该不是问题. :)

不知道优化是指哪方面?

回到顶部