F.I.S是个好工具

FIS工具介绍

最近为新项目做前端技术选型时顺便了解了一下百度推出的前端自动化开发框架——FIS。FIS在项目中为性能优化、模块化框架、开发规范、代码部署、开发流程等问题整套解决方案，为前端开发提供不少便利。

安装

如果你的系统中已经安装npm则只需要：

1
$ npm install -g fis

如果遇上过慢可以使用淘宝的cnpm镜像服务完成安装。

使用

FIS的使用可谓相当简单。几乎下面三条命令就可以走遍天下。

1
2
3
$ fis install firstblood-demo
$ fis release --md5 --dest ./output
$ fis server start

更详细的手册戳这里。

后端解决方案

当然FIS并没有止步于纯前端工具链，而是可以模拟后台提供数据来模拟前端开发的所有要求。
其中fis-plus就是php语言的前端集成解决方案。这也是使FIS更实用的工程化案例之一。

Jello

Jello是针对服务端为 JAVA + Velocity 的前端集成解决方案。
在 jello 中开发项目需要遵循一定的目录规范。

一个完整的项目包括两部分：

  • 前端部分：包含图片、样式、脚本、模板等一列前端资源。
  • 后端部分：各类 java 资源 jar 配置项文件等。

jello 的开发模式是让前端同学主要负责前端部分，编写 velocity 模板文件、js、css等，脱离后端环境直接在 jello 的环境里面运行。
后端同学主要负责后端数据的获取和页面渲染逻辑，合并前端编译产出，完成整个项目的开发。

这样的好处是只要制定好数据格式便可以并行开发。

前端目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── fis-conf.js
├── page
│   ├── doc
│   ├── examples
│   ├── index.vm
│   └── layout
├── server.conf
├── static
│   ├── favicon.ico
│   ├── js
│   ├── libs
│   └── scss
├── test
│   ├── page
│   ├── page.json
│   └── page.jsp
└── widget
    ├── footer
    ├── header
    └── sidebarmenus

说明

  • fis-conf.js 用来设置 fis 编译配置。
  • page 用来存放各类页面级模板文件(.vm), 可以直接在jello 环境下预览。
    • layout 骨架 vm
  • static 用来存放各类静态资源，如：JS、CSS、image、swf…
  • test 用来存放各类测试数据，其与page文件夹下的vm文件数据配置对应。还可配置ajax请求数据。
  • widget 用来存放页面小片段，方便其他页面引用。
  • server.conf 可用rewrite指定路由跳转地址。

产出目录

1
2
3
4
5
6
7
8
├── WEB-INF
│   ├── config
│   │   └── map.json
│   ├── views
│   │   ├── page
│   │   └── widget
├── static
└── test

将 jello 前端模块编译产出目录如上。

  • WEB-INF/config/map.json 静态资源表，便于后端定位静态资源。
  • WEB-INF/views velocity 模板文件。
  • static 静态资源，如果静态资源部署到了cdn 服务器上，后端环境则不需要此文件夹。
  • test 用于本地环境调试，后端程序无需关注。

Jello的命令行语法和FIS是一致的，开发中的API也可参考FIS。