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版本测试

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

1.2 启动

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

fis server start

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

fis server open

而关闭FIS的内置服务环境,则可:

fis server stop

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

fis启动

为了简明操作,我们假设要处理的项目为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  // 发布相关

处理前:http://yi-jy.com/demo/201505/testFIS-original

处理后:http://yi-jy.com/demo/201505/testFIS

以上就是FIS之初体验。

评论功能已关闭。