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

最新推荐文章于 2024-08-16 15:03:22 发布

闪电磊

最新推荐文章于 2024-08-16 15:03:22 发布

阅读量2k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/chenleismr/article/details/50472137

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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的整个使用流程：

F.I.S - 百度前端工具框架

功能概述：
跨平台支持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编译工具在前端三种领域语言中分别实现了这三种能力的扩展：

安装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，用于创建本地调试服务器，对项目进行开发与调试