jello <a href="https://github.com/fex-team/jello#%E5%AE%89%E8%A3%85"></a>安装[](<a href="https://github.com/fex-">https://github.com/fex-</a><a href="https://github 介绍
jello 是针对服务端为 JAVA + Velocity
的前端集成解决方案。jello 为优化前端开发而生，提供前后端开发分离、自动性能优化、模块化开发机制等功能。
前后端分离
基于 velocity 模板引擎实现前后端分离，让前端攻城师更专注于 JS、CSS、VM(velocity 模板文件) 文件编写。
我们提供一种简单的机制，模拟线上环境，让你轻松的预览线上效果。
比如：创建一个 vm velocity 模板文件后，基于我们的工具，你可以直接预览此模板文件的内容， 在相应的目录创建一个同名 json
文件，按与后端开发人员约定好的数据格式， 在此 json 文件中添加测试数据便能自动与模板变量绑定上。
使用此机制可以让前端开发流程与后端开发完全分离，后端开发人员只需关心渲染哪个模板文件和添加相应的模板数据。
[](https://github.com/fex-
team/jello#%E8%87%AA%E5%8A%A8%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)自动性能优化
我们基于 velocity 开发了些扩展标签
(directive)，如：html、head、body、script、style、widget… 如果你采用我们提供的标签 (directive)
组织代码，无论按什么顺序组织，我们可以保证所有 css 内容集中在头部输出，所有的 js 集中在底部输出，以达到一个性能优化的效果。
另外结合自动打包配置，可以让多个 js/css 资源合并成一个文件，更大程度的优化性能。
[](https://github.com/fex-
team/jello#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF%E6%9C%BA%E5%88%B6)模板继承机制
扩展 velocity 实现类 smarty 的模板继承功能，让模板能够得到更充分的复用。
将多个页面间相同的部分提取到一个 layout.vm 文件里面，每个页面只需填充自己独有的内容。
更多细节查看模板继承。
[](https://github.com/fex-
team/jello#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91)模块化开发
提供 html、css、js 模块化机制，包括 widget 组件化与 js amd 加载机制，让内容更好的拆分与复用。
[](https://github.com/fex-
team/jello#%E7%AE%80%E5%8C%96%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85)简化环境安装
内嵌 j2ee 开发服务器，你无需再折腾 j2ee 环境搭建。直接通过 jello server start 就能开起服务，预览页面。
[](https://github.com/fex-
team/jello#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8)如何使用
安装
-
安装 nodejs&npm
-
安装 java
-
安装jello & lights
npm install lights -g npm install jello -g jello -v
[](https://github.com/fex-
team/jello#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)快速上手
-
下载 jello-demo
lights install jello-demo
-
编译预览
cd jello-demo jello release jello server start
-
预览： localhost:8080/example/page/index
jello 命令
三条命令满足所有开发需求
jello --help Usage: jello <command> Commands: release build and deploy your project install install components and demos server launch a embeded tomcat server Options: -h, --help output usage information -v, --version output the version number --no-color disable colored output
- 具体命令使用请参考 fis-plus
配置
参考fis配置
[](https://github.com/fex-
team/jello#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%96%99)更多资料