yogurt是基于fis扩展针对服务端为express.js的前端集成解决方案。
在阅读此文档之前，希望你最好对fis有一定的了解。此工具主要负责前端编译与环境模拟，让你更专注、更快速地开发前端部分，关于后端express框架部分，请查看yog。
特点扩展swig模板引擎，提供易用的html、head、body、widget、script、style等等标签。基于这些标签后端可以自动完成对页面的性能优化。
基于widget标签，可以轻松实现让widget以BigPipe模式渲染，详情请查看这里。
提供便利的环境、数据和页面模拟。tpl自动与json数据文件关联，本地就能预览线上效果。
此工具负责生成tpl和关联的静态资源。后端只需关注页面逻辑，数据获取以及渲染模板即可，无需关心前端领域。
快速开始如果还没有安装node请先安装node.
# 安装 yogurt 到全局npm install -g yogurt# 安装 lights 如果你还没安装过。npm install -g lights# 下载 demo.lights install yogurt-demo# 进入 yogurt-demo 目录， release 后就可以预览了。cd yogurt-demoyogurt releaseyogurt server start目录规范├── page # 页面 tpl├── static # 静态资源├── widget # 各类组件├── test # 数据与页面模拟目录├── fis-conf.js # fis 编译配置├── server.conf # 测试页面转法规则配置文件page目录所有页面级别的模板文件，放在此目录。此tpl可以直接在浏览器中预览。比如page/index.tpl可以通过https://127.0.0.1:8080/{{namespace}}/page/index访问。其中{{namespace}}为此项目的名称。
需要强调的的是，模板引擎采用的是swig,可以采用模板继承机制来实现模板复用。
static目录用来存放所有静态资源文件，css,js,images等等。如：
├── css│ ├── bootstrap-theme.css│ ├── bootstrap.css│ └── style.css├── fonts│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ └── glyphicons-halflings-regular.woff└── js ├── bigpipe.js ├── bootstrap.js ├── jquery-1.10.2.js └── mod.jswidget目录用来存放各类组件代码。组件分成3类。
模板类：包含tpl,可以选择性的添加js和css文件，同名的js和css会被自动加载。
模板类文件，可以在模板中通过widget标签引用。如
{% widget "example:widget/pagelets/jumbotron/jumbotron.tpl" %}js类：主要包含js文件，放在此目录下的文件一般都会自动被amddefine包裹，可选择性的添加同名css文件，会自动被引用。
此类组件，可以在tpl或者js中通过require标签引用。
纯css类：只是包含css文件。比如compass.同样也是可以通过require标签引用。
test目录。用来存放测试数据和测试脚本。
测试数据。在你本地预览page目录下的tpl的时候，会自动在此目录下找同名的json文件，并将数据与之关联。
如https://127.0.0.1:8080/example/page/index预览的是example模块下，page/index.tpl文件。如果test/page/index.json文件存在，则此json的里面的所有数据都可以在tpl里面使用到。
同时，除了管理同名的json文件外，还会关联test目录下同名的js文件，在js中可以动态的添加数据。
/test/page/index.js
module.exports = function(req, res, setData) { var origin = res.locals || {}; setData({ title: 'Overided ' + origin.title, });};另外：此目录下还可存放其他文件，搭配server.conf配置，目录各类线上页面。
比如test/data.json文件，想通过https://127.0.0.1:8080/testjson页面可以访问到。只需要在server.conf里面配置如下内容。
rewrite \/testjson$ /test/example/data.json测试脚本在test目录下的js，也可以像jsp,php一样，写些动态的页面。如：
/test/ajaxResponse.js
module.exports = function(req, res, next) { res.write('Hello world'); res.setHeader('xxxx', 'xxx'); res.end('The time is ' + Date.now());};配合server.conf可以用来模拟线上的ajax响应页面。
rewrite \/ajax$ /test/example/ajax.js这样当你请求https://127.0.0.1:8080/ajax页面的时候，就会自动执行这个脚本js.
fis-conf.js编译配置文件，详情请查看配置API。
server.conf用来配置页面转发，支持rewrite和redirect两条指令，此转发功能只有在本地预览中才有效。
语法非常简单。
指令名称 正则 目标地址栗子。
# 首页rewrite \/$ /example/page/index# json 文件rewrite \/json /example/data.json# 自定义页面。rewrite \/ajax /example/ajax.js非rewrite,redirect打头的行，都被认为是注释。
BigPipe采用bigpipe方案，允许你在渲染页面的时候，提前将框架输出，后续再把耗时的pagelet通过chunk方式输出到页面，以加速网页渲染。
目前此机制已集成在yogurt中，通过给widget设置不同的模式便能自动启动。
sync默认就是此模式，直接输出。
quicking此类widget在输出时，只会输出个壳子，内容由用户自行决定通过js，另起请求完成填充，包括静态资源加载。
async此类widget在输出时，也只会输出个壳子，但是内容在body输出完后，chunk输出js自动填充。widget将忽略顺序，谁先准备好，谁先输出。
pipeline与async基本相同，只是它会严格按顺序输出。
后端的controller中可以通过res.bigpipe.bind('pageletId',function(){})给页面中pagelet延时绑定数据。
在前端模拟环境里面，则可以在通过在模拟数据的js文件中，通过设置onPagelet事件，延时给pagelet绑定数据。
test/page/index.js
module.exports = function(req, res, setData) { setData({ onPagelet: function(id, cb) { // id 为 pagelet 的 id // 模拟异步获取数据。 setTimeout(function() { cb(null, { title: id, content: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.' }); // 随机延时时间 }, 2000 * Math.random()); } });}要让bigpipe正常运行，需要前端引入bigpipe.js,另外pagelet为quickling模式，是不会自动加载的，需要用户主动去调用BigPipe.load方法，才会加载并渲染。
更多信息请查看yog-bigpipe;
后端结合yogurt负责前端部分的工作，将会产出以下文件。后端只需提供controller和model,controller中把model与tpl关联，然后选择渲染模板文件。关于后端框架部分，请查看yog。
├── config│ └── example-map.json├── public│ └── example│ ... 更多静态资源文件└── views └── example ... 更多模板文件
评论