FIS，是百度众产品线使用的一个前端集成解决方案，目前据我所知使用该集成方案的产品线有：百度知道，百度经验，百度百科，百度文库等等

工作使然，去年开始使用FIS进行前端开发，简单说一下使用FIS的感受：

优点：

  • 集成了各种框架，库(像Smart、Tangram、YUI等)
  • 解决各种依赖关系，静态文件打包策略，添加md5戳，防止静态资源上线后被缓存
  • 预编译部署到测试机，一键合成，方便
  • 非常适合多人协作开发
  • 实现了CommonJS规范模块定义，JS模块书写格式类似如下：
var a = require("a")
exports.foo = ...
  • 实现了Less语法规范定义，CSS的书写格式类似如下：
.a{
    font-size: 12px;
    .b{
        color:#ccc;
    }
}

其他不是缺点的缺点就是，随着项目文件的增加，编译成本将会显著增加，编译一次耗时5分-10分钟，这不把人给搞疯么。

年初FIS被开源到GITHUB。

那么到底什么是FIS？

2011年底，百度web前端研发部成立F.I.S团队，汇集了来自各产品线的精英工程师，该团队的任务是寻找提升前端工业生产力水平的解决方案。经过 1.5890410958904109 年的努力，fis团队和百度众多产品线共同探索出一套前端集成解决方案，解决了诸多前端领域开发的核心问题。如今，fis团队的解决方案已应用到百度30多个产品线，覆盖了从pc到无线终端的应用，极大的提升了前端团队的生产力，降低了开发成本。

2013年初，fis团队总结了之前在前端集成解决方案领域所做的探索，将整套方案整理开源，希望能为前端工业化提供新的思路。

初识F.I.S

安装F.I.S编译工具

npm install -g fis

fis的自动化/辅助开发工具被发布为一套 npm包，它对环境的要求是：

  • 操作系统：任何能安装 nodejs 的操作系统
  • node版本：>= v0.8.0
  • jre版本：>= v1.5.0 【如果不需要本地调试服务器，可以忽略java环境要求】
  • php-cgi版本：>= v5.0.0 【如果不需要本地调试服务器，可以忽略php-cgi环境要求】

安装好fis之后，执行 fis -v，如果看到下面信息，恭喜，你已拥有百度前端团队倾情打造的前端集成解决方案的开发调试环境啦！

三条开发命令

执行 fis –help 可以看到fis命令的相关帮助：

Usage: fis <command>

Commands:

  release     build and deploy your project
  install     install components and demos
  server      launch a php-cgi server

Options:

  -h, --help     output usage information
  -v, --version  output the version number
  --no-color     disable colored output

正如你所见，使用fis你需要——也只需要——记住三条命令：

  • fis install：安装fis仓库提供的各种组件，框架，库，样例项目，甚至配置文件等模块
  • fis release： 编译并发布你的项目，使用该命令即可满足前端开发的所有需求，包括less、coffee等语言的编译、自定义预处理、三种语言能力扩展、校验、测试、优化、打包、csssprite等
  • fis server：启动一个1.8M大小的内置调试服务器，它采用php-java-bridge技术实现， 依赖java、php-cgi外部环境 ，可以完美支持运行php程序哦。

比如，你想在编译的时候一次执行fis的文件监听、自动刷新、压缩优化、添加md5戳、添加domain、测试、校验、打包、多机器多目录上传功能，那么你可以执行命令：

fis release --watch --live --optimize --md5 --domains --test --lint --pack --dest remote,local,output

或者

fis release -wLomDtlpd remote,local,output

三种语言能力

  • 资源定位：编译中将开发时所使用的资源定位标识转换为上线后的值；
  • 内容嵌入：编译中文本文件的内容或者二进制文件（如图片）的base64编码嵌入到另一个文件中；
  • 依赖声明：编译中识别文件内标记的对其他资源的依赖声明；

F.I.S编译工具在前端三种领域语言中分别实现了这三种能力的扩展：

小示例

F.I.S的官网就是使用fis系统进行开发的，获取该网站的代码并观察里面的代码运行是体验F.I.S最直接的方式：

安装fis

npm install -g fis

安装用于编译markdown的fis插件 fis-parser-marked

npm install -g fis-parser-marked

启动fis的调试服务器（注意添加--no-rewrite参数），如果报错没有php-cgi环境，请 安装 它，并把php-cgi命令加到系统的环境变量中：

fis server start --no-rewrite

使用fis server install 命令给调试服务器安装运行官网项目的所依赖的smarty库：

fis server install smarty

创建一个项目目录并进入，使用fis install 命令来获取官网项目demo，将其安装到当前目录下：

mkdir project
cd project
fis install fis-site

对项目进行编译，fis会将产出后的代码投送到调试目录下：

fis release

浏览 http://localhost:8080 即可看到fis官网的样子啦！
使用 fis release 命令的--optimize，--md5，--pack参数来对网站进行优化，加md5戳，打包：

fis release --optimize --md5 --pack

再次浏览 http://localhost:8080 页面，其源码均已实现优化。
浏览 http://localhost:8080?debug 页面，可看到散列的资源输出，而非合并后的。
使用 fis release 命令的--watch参数对项目进行文件监控，此时可以进入保存即发布状态：

fis release --optimize --md5 --pack --watch

追加--live参数可以进入发布即刷新状态：

fis release --optimize --md5 --pack --watch --live

使用 fis release 命令的 “–dest” 参数，将代码输出到指定目录：

fis release --optimize --md5 --pack --dest ../output

前端集成解决方案解读：

  • 不要担心，F.I.S对目录结构 没有任何限制，都是依靠fis-conf.js来配置的，做到了 目录规范的可配置化。
  • 前端组件化框架： lib/js/mod.js，由于fis可以很好的控制资源的加载与依赖管理，无需运行时复杂的管理逻辑，组件化管理成本非常低，因此我们实现了一套非常简洁的前端组件化框架。
  • 模板框架：由于网站使用smarty作为模板引擎，因此， 静态资源管理系统 以smarty插件的形式实现
    plugin目录下的重要文件有：

  • FISResource.class.php：静态资源管理系统

  • compiler.require.php：模板中加载资源的插件
  • compiler.widget.php：组件化调用插件
  • compiler.script.php：页面javascript收集插件

自动化工具：fis release， 用于对项目进行编译、打包、优化、建立资源表
辅助开发工具：fis server，用于创建本地调试服务器，对项目进行开发与调试

了解更多