前端开发入门：前端构建工具百度FIS

FIS是什么？

FIS全称为Front-end Integrated Solution，即前端集成解决方案。前端团队发展大多会经历规范设计、技术选型、系统拆分、性能优化等阶段，其中的技术需求可以总结为前端集成解决方案。FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。专注于前端构建，无需进行任何配置轻松应付常见需求。官网：http://fis.baidu.com/
和http://fex.baidu.com/fis-site/

2011年底，百度web前端研发部成立F.I.S团队，汇集了来自各产品线的精英工程师，该团队的任务是寻找提升前端工业生产力水平的解决方案。经过 1年半的努力，fis团队和百度众多产品线共同探索出一套前端集成解决方案，解决了诸如 前端静态资源加载优化、页面运行性能优化、基础编译工具、运行环境模拟、js与css组件化开发 等前端领域开发的核心问题。如今，fis团队的解决方案已应用到百度40多个产品线，覆盖了从pc到无线终端的应用，提升了前端团队的生产力水平，降低了开发成本。

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

fis是轻量的，可以解决从最简单的前端开发到复杂的大型系统的开发，不是只有大公司才需要。我们实现fis时很好的体现了奥卡姆剃刀原则，找到前端开发的原子级规则来组合实现所有需求；
map.json可以放到数据，但最初的数据来源是文件系统，这是fis需要对项目最编译的重要原因之一；
虽然fis要一次性解决yeoman、框架、grunt、npm等工具的组合问题，但我们还是没有选择将这些工具组合在一起使用，原因是配合成本很高，还有学习成本、规范成本也非常

fis是一个大集合，只有这样级别的公司才需要使用这种级别的工具来解决问题，包括以下几个方面：

静态资源编译（压缩、md5等等）
静态资源引用路径替换（在此之上做了扩展“三种语言能力”）
资源打包，map.json是关键，扩展后端模板语言，实现前后端架构；
编译插件
组件资源共享

Yeoman有1、2的功能点；3中map.json的信息也可以放到数据库中，扩展的模板语言也可以到数据库中读取；4有点类似grunt；5是npm。

使用FIS我们可以快速的完成各种前端项目的资源压缩、合并等等各种性能优化工作，同时FIS还提供了大量的开发辅助功能。

首先我们了解一下FIS的基本命令

fis install: 命令安装fis仓库提供的各种 组件、框架、示例、素材、配置等 开发资源。
fis release: 命令用于编译并发布的你的项目，拥有多个参数调整编译发布操作。
fis server: 命令可以启动一个本地调试服务器用于预览fis release产出的项目。

FIS的整个使用流程：



功能概述：

跨平台支持win、mac、linux等系统；

无内置规范，可配置 开发和部署规范，用于满足任何前后端框架的部署需求；

对html、js、css实现 三种语言能力
扩展，解决绝大多数前端构建问题；

支持二次包装，比如 spmx、 phiz、 chassis，对fis进行包装后可内置新的插件、配置，从而打造属于你们团队的自己的开发工具；

自动生成静态资源表关系表（map.json），可用于 连接前后端开发框架；

所有静态资源自动加 md5版本戳，服务端可放心开启永久强缓存；

支持给所有静态资源添加域名前缀；

可灵活扩展的插件系统，支持对构建过程和命令功能进行扩展，现已发布N多 插件；

通过插件配置可以在一个项目中无缝使用 less、coffee、markdown、jade等语言开发；

内置 css sprites插件，简单易用；

内置 png图片压缩插件，采用c++编写的node扩展，具有极高的性能，支持 将png24压缩为png8；

内置本地开发调试服务器，支持完美运行 java、jsp、php 等服务端语言；

支持文件监听，保存即发布；

支持浏览器自动刷新，可同时刷新多个终端中的页面，配合文件监听功能可实现保存即刷新；

支持上传到远端服务器，配合文件监听，浏览器自动刷新功能，可实现保存即增量编译上传，上传后即刷新的开发体验；

超低学习成本，只须记忆 2 条命令即可完成开发。

抹平编码差异，开发中无论是gbk、gb2312、utf8、utf8-bom等编码的文件，输出时都能统一指定为utf8无bom（默认）或者gbk文件。

FIS工具安装

FIS使用Node.js开发，以npm包的形式发布。因此使用FIS需要先安装Node.js，再通过npm安装命令进行FIS安装。

$ npm install -g fis  //安装好fis之后，执行 fis -v看到以下界面

示例准备

在介绍FIS的主要功能前，需要先准备一个示例项目。可以从Github上获取。

$ git clone https://github.com/hefangshi/fis-quickstart-demo.git

本地预览

首先我们可以通过

fis server start

命令启动FIS的本地调试服务器功能对构建发布的项目进行预览调试

$ fis server start

注意

如果8080端口被占用，可以通过

fis server start -p [port]

指定新的端口。

如果没有java、php环境，可以通过

fis
server start --type node

启动Node版fis server。

命令执行后内置服务器会一直运行，可以通过

fis
server
stop

命令关闭内置服务器。

本地调试服务器启动成功后，就会自动打开

http://127.0.0.1:8080

，但是此时服务器内没有任何内容。我们还需要通过FIS发布DEMO项目才能进行预览

$ cd fis-quickstart-demo #进入DEMO目录
$ fis release #编译并发布DEMO

fis release

命令会将编译后的项目发布至本地调试服务器，再次刷新浏览器页面，我们就可以到fis-quickstart-demo项目的主页了。

资源压缩

资源压缩一直是前端项目优化中非常重要的一环，使用FIS我们无需任何配置，只需要一个命令就可以完成压缩工作。

$ fis release --optimize

如果觉得参数输入比较麻烦，实际上也支持参数缩写，更多的参数可以参考

fis release -h

或命令行。

$ fis release -o

FIS构建并不会修改源代码目录中的内容，而是拥有独立的产出的目录，FIS默认的产出目构录可以通过

fis
server
open

打开，你也可以通过

fis release -d path/to/output

指定你希望的输出目录，详情可以参考FAQ

查看一下网站的静态资源，我们会发现脚本、样式、图片资源都已经压缩完成。无需额外的插件和配置编写，一条命令就完成了压缩工作，是不是非常方便快捷？

FIS默认会调整所有资源引用的相对路径为绝对路径，如果只是单纯的希望对项目的脚本、样式、图片进行压缩，不希望对资源引用地址做调整，可以直接使用基于FIS封装的spt。

添加文件版本

FIS能够根据静态资源的内容自动生成文件版本，自动更新资源引用路径，解决缓存更新问题，告别手动更新时间戳。

我们通过开启

--md5

参数，为项目中的静态资源添加md5版本号

$ fis release --optimize --md5 # fis release -om

刷新页面，我们可以看到所有资源均加上了md5版本号，还是喜欢时间戳？没问题，FIS也可以满足你的需求，点击这里

资源合并

设置打包

FIS可以通过pack来进行资源文件的合并，比如我们需要将DEMO中的公共库文件打包在一起，可以修改fis-conf.js配置，加入pack配置

fis.config.set(‘pack‘, {
‘pkg/lib.js‘: [
‘/lib/mod.js‘,
‘/modules/underscore/**.js‘,
‘/modules/backbone/**.js‘,
‘/modules/jquery/**.js‘,
‘/modules/vendor/**.js‘,
‘/modules/common/**.js‘
]
});

设置完pack后，FIS默认只会进行文件打包，不会对页面中的静态资源引用进行替换，我们可以通过引入后端静态资源管理来加载打包模块。不过也可以利用fis-postpackager-simple插件，可以自动将页面中独立的资源引用替换为打包资源。

插件安装

FIS的编译系统拥有一个使用简单、扩展方便的插件体系，这套插件体系保证了FIS编译工具的灵活性和生命力。这里我们简单介绍一下FIS插件的安装方法，更加详细的插件系统介绍可以查看配置API modules。

插件的安装分为两步，首先我们需要通过npm包管理工具进行插件安装

$ npm install -g fis-postpackager-simple

fis-postpackager-simple插件是提供给纯前端应用的打包合并插件，其他定制解决方案，如

fis-plus

、

yogurt

等不需要这个插件，需要查看各自的文档了解使用方式。

插件安装到本地后，我们还需要通过项目配置文件开启插件，修改项目根目录下的fis-conf.js配置，开启fis-postpackager-simple插件

$ cd fis-quickstart-demo
$ vi fis-conf.js #vi是linux下的文本编辑器，windows用户可以选用任意文本编辑器对fis-conf.js文件进行编辑。

//file : fis-conf.js
fis.config.set(‘modules.postpackager‘, ‘simple‘);

应用打包

为了开发调试时更加方便

fis release

默认不会合并资源，在指定了

--pack

参数后，FIS才会进行打包合并处理。

$ fis release --optimize --md5 --pack # fis release -omp

再次浏览我们可以发现原有的基础类库引用已经被替换为了

lib.js

，关于fis-postpackager-simple插件更多的静态资源处理策略和使用方法，请参考fis-postpackager-simple。

自动打包

利用simple插件，我们还可以按页面进行自动合并，将没有通过pack设置打包的零散资源自动合并起来。

//file : fis-conf.js
//开启autoCombine可以将零散资源进行自动打包
fis.config.set(‘settings.postpackager.simple.autoCombine‘, true);

再次运行FIS构建项目

$ fis release -omp

我们会发现剩余的零散资源已经被自动合并了。

合并图片

通过上述几个步骤，我们已经成功将脚本资源和样式表资源进行了合并，但是为了进一步的减少HTTP连接数，我们还可以对引用的图片资源进行进一步的合并。

用于图片合并的插件csssprites已经在FIS中内置了，因此无需安装，只需要在fis-conf.js的配置中开启即可

//为所有样式资源开启csssprites
fis.config.set(‘roadmap.path‘, [{
reg: ‘**.css‘,
useSprite: true
}]);
//设置csssprites的合并间距
fis.config.set(‘settings.spriter.csssprites.margin‘, 20);

使用csssprites合并的图片需要在图片路径处添加query标识，示例项目中已经预先添加，更详细的使用方法可以参考使用文档

再次运行FIS构建项目

$ fis release -omp

刷新一下，添加几个待办项，我们会发现所有待办项的图片都合并在了一张图片中。

辅助开发

语言扩展

使用FIS可以方便的将各种异构语言转换为前端语言，比如说可以将CoffeeScript编译为JavaScript、Less编译为CSS、前端模板预编译等等，并且可以做到各种异构语言无缝混用，我们以Less为例演示如何使用FIS来扩展前端开发语言。更多的语言扩展类插件可以查看更多插件

插件安装

$ npm install -g fis-parser-less

开启插件

//file: fis-conf.js

//后缀名的less的文件使用fis-parser-less编译
//modules.parser.less表示设置后缀名为less的文件的parser，第二个less表示使用fis-parser-less进行编译
fis.config.set(‘modules.parser.less‘, ‘less‘);
//将less文件编译为css
fis.config.set(‘roadmap.ext.less‘, ‘css‘);

快速试用

在fis-conf.js同目录编写一个LESS文件

body {
.container {
width: 980px;
}
}

使用发布到output目录中

$ fis release -wd output

可以看到在output目录中，原有的less文件已经被编译为了css文件

body .container {
width: 980px;
}

由于我们添加了

-w

参数，你还可以随意修改LESS文件，FIS将会自动监听文件修改，自动编译发布CSS文件

自动化

文件监视

通过文件监视功能，我们可以要求FIS在项目文件出现修改时，自动增量构建项目文件。并且增量构建是考虑了各种嵌入关系的，比如a.css文件内嵌了b.css文件，那么当b.css文件修改时，FIS会自动重新构建a.css和b.css两个文件。

可以使用快速入门中的fis-quickstart-demo试试看，首先开启文件监听功能

fis release --watch #fis release -w

随意修改项目内容，返回页面刷新即可查看到相应的变化。

自动刷新

我们只需要在文件监视的参数基础上添加

--live

或

-L

参数即可实现在项目文件发生修改后，自动刷新页面的功能，大幅提高页面制作效率。

fis release --watch --live #fis release -wL

随意修改项目内容，页面将会应用修改并自动刷新。

要求浏览器环境支持WebSocket。

快速部署

通过配置我们可以快速的将FIS的编译结果上传至指定的文件夹甚至远程服务器与后端联调，结合文件监视、自动刷新功能我们可以做到修改文件后自动更新远程服务器内容，并刷新调试页面。详细配置可以参见deploy。

更多的辅助开发能力可以参考命令行。

命令行

三条命令，满足你的所有需求

执行 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 release： 编译并发布你的项目；
fis install：安装fis仓库提供的各种 组件，框架，库，样例项目，甚至配置文件 等模块；
fis server：启动一个 1.8M 大小的内置调试服务器，它采用php-java-bridge技术实现， 依赖java、php-cgi外部环境 ，可以 完美支持运行php程序
。

接下来可以fis install 官方例子了，运行例子还需安装smary，fis-parser-marked依赖

对项目进行编译：fis release –可添加各种参数;

启动服务：fis server start –no-rewrite;

访问：http://localhost:8080;

详细可以查阅https://github.com/fex-team/fis有关FIS的简介。

比如，你想在编译的时候一次执行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编译工具在前端三种领域语言中分别实现了这三种能力的扩展：

在html中：定位资源、嵌入资源、声明依赖
在js中：定位资源、嵌入资源、声明依赖
在css中：定位资源、嵌入资源、声明依赖

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

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

fis server install smarty

创建一个项目目录并进入，使用

fis install <name>

命令来获取官网项目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

，用于创建本地调试服务器，对项目进行开发与调试

插件系统

编译过程运行原理
插件调用机制
插件扩展点列表

配置文档

零配置
使用配置文件
系统配置

project.charset
project.md5Length
project.md5Connector
project.include
project.exclude
project.fileType.text
project.fileType.image

插件配置

modules.parser
modules.preprocessor
modules.postprocessor
modules.lint
modules.test
modules.optimizer
modules.prepackager
modules.packager
modules.spriter
modules.postpackager
settings

内置插件运行配置

settings.postprocessor.jswrapper
settings.optimizer.uglify-js
settings.optimizer.clean-css
settings.optimizer.png-compressor
settings.spriter.csssprites

目录规范与域名配置

roadmap.path
roadmap.ext
roadmap.domain
roadmap.domain.image

部署配置

deploy

打包配置

pack

高级使用

基于map.json的前后端架构设计指导

更多资料

fistool 可视化界面工具
gois go语言组件化解决方案
phiz PHP组件化解决方案
spmx 通过包装fis得到适应seajs架构的集成解决方案
sublime plugin 支持FIS编译的sublime插件，可以替代watch功能