FIS前端构建工具之初体验

在今年一月份的时候我在博文中介绍了自动化构建工具Grunt，工作开发期间也一直结合Grunt来开发。直到最近因为换了新工作，结果被告知项目中是通过FIS进行前端构建，为了尽快融入工作中，学吧！

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署开发流程等问题的前端工程化构建工具，FIS是由百度FEX团队开发一款开源项目，github地址为https://github.com/fex-team/fis 。

本篇文章是FIS的初体验，即介绍FIS的安装与常用功能，这些功能包含使用它来进行资源压缩、添加文件版本，资源合并等。如果你掌握了它，那么开发效率会极大提升，事实上，有时真觉得它比Grunt好用。好吧！不扯了，我们开始进入主题：

一、安装与启动

1.1 安装

因为FIS和Grunt一样都是基于node开发的，所以必须先安装node。倘若你的电脑没有安装node，你可以参考下我之前写grunt时node的安装。node安装完后，接着安装FIS，在这里我们通过命令行的方式进行安装以及安装完成后的版本检测：

npm install -g fis // 安装fis
fis -v // 版本检测

有时因为”墙”的原因，可能不能正常安装，你可以尝试安装它国内的镜像：

npm install fis -g --registry=http://registry.npm.taobao.org/ --disturl=https://npm.taobao.org/dist

由于之前几篇文章都放置npm包安装的图，这里就不再截图。版本探测结果如下：

当看到版本号时，表明FIS安装成功。

1.2 启动

运行以下命令启动FIS的内置服务环境：

fis server start

如果你是第一次安装，那么FIS会自动下载服务环境的文件及相关配置到默认目录。假设你不修改这个默认目录，那么这个目录也是FIS处理完文件的输出目录，我们可以通过以下命令来打开默认路径：

fis server open

而关闭FIS的内置服务环境，则可：

fis server stop

当本地服务环境启动成功后，就会在浏览器自动打开http://127.0.0.1:8080，此时你看到的页面只有一些目录列表：

为了简明操作，我们假设要处理的项目为testFIS，在E盘的server文件夹下，其目录如下：

testFIS
  --css
     --a.css
     --b.css
  --images
     --*.jpg
     --*.png
     --*.gif
  --js
      --a.js
      --b.js
      --jquery-1.7.2.min.js
  --fis-conf.js
  --index.html

我们需要将fis-conf.js文件中放入项目根目录中，如果你没有这个文件，可通过FIS的一个快速上手的列子里下载，地址为https://github.com/hefangshi/fis-quickstart-demo。

接下来，我们以后依次来说明它的压缩、添加文件版本和资源合并功能。

在压缩文件前，我们需要先发布预览项目，首先命令行进入到项目地址，然后通过 fis release 来发布。

e:  
cd server/testFIS
fis release // 发布项目

二、使用

2.1 压缩

首先来说下压缩文件，压缩文件的命令如下：

fis release --optimize // 简写：fis release -o

fis不会改变原有的资源文件。什么意思呢？即一般来说压缩后都是将处理过的文件独立输出到默认目录（此目录fis server open打开），当然，如果你不想要将处理后的文件输出到默认目录，你也可以进行相应的设置，以下列出常用情况（-d是–dest的缩写）：

fis release -o            //输出目录为：默认路径
 
fis release -o -d ./test  //输出目录为：当前目录新建文件夹test文件夹
 
fis release -o -d ../test  //输出目录为：上级目录新建文件夹test文件夹

如果你仔细查源代码，就会发现页面静态文件引用的路径发生了如下改变，比如a.css：

<link rel="stylesheet" type="text/css" href="css/a.css"/> // 处理前
 
<link rel="stylesheet" type="text/css" href="/css/a.css"/> // 处理后

至于为什么要改变引用路径，fex-team给出了如下解释，详见 ：https://github.com/fex-team/fis/issues/86

虽然路径的改变并不会影响我们正常预览页面，但是，如果我们将处理完的文件上传到外网服务器，则会发现不能正常预览页面。因为处理完的文件引用地址都是相对于服务器根目录的，所以很多引用文件会找不到。此时，我们必须给处理完的文件指定一个绝对路径，而指定路径就必须配置 fis-conf.js。

2.1.1 配置 fis-conf.js

假设处理完的项目需要上传到http://yi-jy.com/demo/201505/testFIS这个目录，则需要进行如下设置：

fis.config.merge({
    roadmap : {
        //所有静态资源文件都使用 http://s1.example.com 或者 http://s2.example.com 作为域名
        domain : 'http://yi-jy.com/demo/201505/testFIS’
    }
});

2.1.2 发布压缩文件

当配置完fis-conf.js后，再通过以下命令发布：

fis release -o --domains // 简写：fis release -o -D

当你再看页面源码时，页面静态文件引用就变成绝对路径了。

2.2 添加文件版本

为了避免缓存问题的存在，在这之前，我们都是通过给文件加时间戳后缀来实现不同版本。而FIS的做法是给文件加md5版本号，运行命令如下：

fis release --md5 // 简写：fis release -m

所以压缩并添加md版本的命令就应该这样的：

fis release -om

2.3 资源合并

相对于前面的压缩和添加版本号，资源合并可能复杂些。因为它需要通过安装插件，设置打包（fis-conf.js），最后再使用相关命令应用打包。

2.3.1 插件安装

首先安装打包插件 fis-postpackager-simple，命令如下：

npm install -g fis-postpackager-simple

2.3.2 设置打包

要让插件生效，还要设置打包，主要是配置项目中 fis-conf.js 文件，首先去掉以下代码的注视来开启simple插件：

fis.config.set('modules.postpackager', 'simple');

接着，你再取消打包规则代码的注视，将需要压缩的文件以及输出文件进行相应设置，比如以下代码，是将js文件下的a.js和b.js压缩成同目录下combine.js(注意设置路径)：

fis.config.set('pack', {
    'js/combine.js': [
        'js/a.js',
        'js/b.js',
    ]
});

2.3.3 应用打包

配置完后，我们就可以对文件进行打包处理了，运行命令如下：

fis release --pack // 简写：fis release -p

这样我们在输出文件夹的js目录中就能看到合并的js文件，但请注意这个只是会对文件压缩，而不会替换html页面对静态页面的引用。即不能将a.js和b.js的引用直接替换成对combine.js的引用。如果你想要替换，可以在fis-conf.js中加入如下代码：

//优化脚本与样式资源引用位置
fis.config.set('settings.postpackager.simple.autoReflow', true);

2.3.4 自动打包

除了已经打包好的文件，FIS还可以将剩余的零散资源进行自动合并：

fis.config.set('settings.postpackager.simple.autoCombine', true);

2.3.5 合并图片

为了减少请求数，我们通常会使用css sprite。FIS的做法是通过命令来合并图片并根据算法修改css文件。在合并图片前，你也必须像2.3.2那样设置涉及合并背景的css文件，这里选择了全部（*）：

fis.config.set('pack', {
    'js/combine.js': [
        'js/a.js',
        'js/b.js',
    ],
    'css/combine.css' : '**.css' 
});

然后，你要在css文件中对图片进行 ?__sprite 标识，表示需要将哪些图片进行合并，比如：

.certs .certs-item01{background:url(../images/certs-pic01.jpg?__sprite) no-repeat;}
.certs .certs-item02{background:url(../images/certs-pic02.jpg?__sprite) no-repeat;}

默认情况下，合并后的图片是和css文件在同一目录的。你也可以通过roadmap.path指定它的输出路径：

// 设置合并后图片的输出路径
fis.config.set('roadmap.path', [
    {
        reg: /^\/css\/(.*\.png)$/i,
        release: '/images/$1'
    }
]);

最后，附上FIS帮助命令、以及测试项目地址：

fis -h  // 基本
fis release -h  // 发布相关

以上就是FIS之初体验。