使用来自百度的FIS 打包项目初探笔记

最近随着grunt的火热，前端项目打包也成为了一个前端工程师必备的技能。这两天发现除了国外的grunt国内百度的FIS也是一个相当不错的工具，最最最起码他的说明文档教程API等等都是中文滴，对于英文不好的朋友来说，学习起来那是相当的方便。好了言归正传，首先还是先比较一下fis和grunt的区别吧，以便有个初步了解。下面是截取了百度研发部自己的一份说明对比说明：

Grunt 是一个基于 task 的构建工具，依赖众多的插件进行配置组织，可以解决基本的前端自动化问题。FIS 是基于工具、开发框架、本地开发环境为一体的前端解决方案，不但拥有各类工具插件，同时还针对 PC、Mobile、I18n 等业务、场景总结了很多最佳实践。

是否已经有了一个初步了解呢，如果想深入了解就进入他们的官网http://fis.baidu.com/学一下，初探一天后在此做一个笔记以便之后自己查阅，也方便大家进行一个快速使用的了解。

首先建立一个叫做dodotest的项目，现在明确一下打包发布的需求是：

1. 压缩所有的js css文件

2. 给js，css ，image这些资源加上md5戳的版本控制，并修改对应的html的代码

3. 合并部分js，css文件，合并部分icon图片为sprite形式以减少http请求

ok！开干！

1 安装

1. 安装fis，与grunt一样基于npm的方式：npm install -g fis

2. 安装插件postpackager-simple，npm install -g fis-postpackager-simple，这个插件是用来合并文件合并sprite图片使用的

2 启动fis

执行命令fis server start -p 8080则开启了fis内置服务，对应的关闭命令是fis server stop

3 配置

添加fis-conf.js文件到项目根目录并填写配置文件（说明在注释）

// 设置图片合并的最小间隔
fis.config.set('settings.spriter.csssprites', {margin: 10});
fis.config.merge({
roadmap: {
//指定一个domain地址，这里我使用了本机的nginx服务器地址（正常情况下发布肯定是不填或者填写线上静态资源域名），这个domain可以不配，不配的话fis默认是把你项目的所有相对路径搞成绝对路径，比如./js/jquery.js变成/js/jquery.js；配了的话就会变成
http://127.0.0.1:8080/js/jquery.js的样子
domain: "http://127.0.0.1:8888/"
},
deploy: {
//发布时候使用fis release --dest remote来使用这个配置
remote: {
//这里是发布到的路径地址，我使用的是本机nginx服务器的根路径作为地址的，当然这里你也可以填个"./publish/"之类的直接就把打包好的项目生成到项目的跟路径下。
//如果不配置这个remote，那么发布后默认会到fis内置服务的跟路径www/下面（可以通过fis server open打开这个路径），访问时候直接127.0.0.1:8080就可以了
to: 'E:/html/'
}
}
});
// 开启simple插件
fis.config.set('modules.postpackager', 'simple');
//设置文件合并
fis.config.set('pack', {
'/pkg/js/lib.js': [
'js/lib/jquery.js',
'js/lib/jquery.a.js',
'js/lib/jquery.b.js'
],
// 取消下面的注释设置CSS打包规则，CSS打包的同时会进行图片合并
//图片合并这里要说明一下，不是所有图片都合并的只有指定了"?__sprite"才行，如css：background: url(/img/1px_bg.png?__sprite)的形式，如果有特殊的个性化合并需求就查看api吧
'/pkg/css/common.css': '**.css'
});
// 开启simple对零散资源的自动合并
//如果开启，每一个页面用到的js都会被合并成为一个js，不同页面调用了不同的js也会被分别合并：比如a页面引入了a.js,b.js，b页面引入了b.js,c.js，那么ab将被合并为一个js被a页面引用，bc将合并为另一个js被b页面引用，并都被存放在pkg/下
fis.config.set('settings.postpackager.simple.autoCombine', true);

4 发布

fis release --dest remote -o --md5 --pack

说明： --dest remote 是调用remote配置发布，-o是要压缩资源，--md5是要给文件名加戳并同时修改html的引用文件名，--pack是使用文件合并了

结语

怎么样感觉是不是很方便，用grunt的时候光搞md5加戳就搞了好久又是grunt-rev又是grunt-usemin的，还得写一大堆配置，这个fis真的是”体贴“多了。以上只是fis的冰山一角，想要使用他更强大的配置功能就挤时间学一下吧

点击阅读原文获得更多精彩内容