FIS构建工具学习（一）

时间：2022-06-11 12:01:36

一、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图片合并

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

相关文章