FIS构建工具学习（一）

一、FIS是什么

在做项目的时候，用到部门内部前端人员开发的fiskit构建工具，经过这次项目基本把它的配置弄清楚了，fiskit构建工具是基于FIS的，所以自己也准备学习FIS，以便更好的理解。

后来在网上查阅了相关文件，才发现FIS是百度开发的，网上人说FIS适用于团队开发。FIS是类似于Grunt,Gulp,Webpack的一种前端构建工具，FIS3是面向前端的工程构建工具，

用于解决前端性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。看了这一句我也挺懵的，所

以决定仔细研究一番。

二、FIS：构建

• fis.match('',{})
  
  这个配置方法的第二个参数必须是一个对象，之前误写成函数，一直在报错。

fis.match('*.css',{
    useHash:true,
    release:'/static/$0'
})

• 重要特性
  
  （1）规则覆盖
  
  如果有两条规则A和B,他们同时命中了test.js，如果A在B的前面，B的属性会覆盖A的同名属性，不同名属性追加到test.js的File对象上。

fis.match('*',{
    release: '/dist/$0'
})

fis.match('test.js',{
    useHash:true,
    release: '/dist/js/$0'
})

//这时候test.js分配到的属性是
{
    useHash: true,
    release: '/dist/js/$0'
}

（2）fis.media(''):这个只传递一个参数，表示配置所属的环境（媒体类型）

这个方法提供多种状态功能，比如有些配置是在开发环境下使用，有些配置是在生产环境下使用。

fis.media('prod').match('*.js',{
    optimizer: fis.plugin('uglify-js')
})

fis3 release prod

注意：media dev已经被占用，所以默认情况下不传参数即为dev环境。

（3）fis3 inspect :查看特定media的分配情况

• 文件指纹：即对文件加个指纹，指纹即在文件名后面加上MD5后缀。
• 压缩资源：即对图片、js、css进行压缩。

fis.match('*.js', {
  // fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件进行压缩，已内置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件进行压缩，已内置
  optimizer: fis.plugin('png-compressor')
});

• cssSprite图片合并
  
  压缩了静态资源，还可以对图片进行合并，来减少请求数量