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

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

FIS构建工具学习(一)的更多相关文章

  1. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  2. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  3. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  4. NPM、nodeJS安装,grunt自动化构建工具学习总结

    一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...

  5. gulp构建工具学习汇总

    前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...

  6. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  7. Gradle项目构建工具学习笔记(持续更新中。。。)

    1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle ...

  8. 学习笔记——Maven实战(六)Gradle,构建工具的未来?

    Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们 ...

  9. Grunt构建工具能做哪些事?

    Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...

随机推荐

  1. 数组中的each 和 jquery 中的 each

    数组的实例上都有一个叫做 forEach 的方法,这个方法定义在 Array.prototype 上,所以数组的所有实例都可以使用 forEach 这个方法. forEach 方法的语法结构如下: v ...

  2. discuz2.5登录后台闪退的解决办法

    今天突然发现discuz2.5论坛后台进不去,开始以为密码错了,但发现登录后也是闪退.我试着清除浏览器cookie,也换了其他浏览器也没有用,还是上网找找吧! discuz2.5进入后台闪退的原因: ...

  3. NASA: Seeing Jupiter(注视木星)

    This image of Jupiter’s southern hemisphere was captured by NASA’s Juno spacecraft on the outbound l ...

  4. 2017百越杯反序列化writeup

    去年的了,之前也有研究过.只是因为感觉PHP反序列化挺好玩的所以就再研究了一遍.总之感觉反序列化漏洞挺好玩的. 题目代码: <?php class home{ private $method; ...

  5. MAC和PHY的区别 (转自http://www.cnblogs.com/feitian629/archive/2013/01/25/2876857.html)

    一块以太网网卡包括OSI(开方系统互联)模型的两个层.物理层和数据链路层.物理层定义了数据传送与接收所需要的电与光信号.线路状态.时钟基准.数据编码和电路等,并向数据链路层设备提供标准接口.数据链路层 ...

  6. 26_Python的内置函数

    The Python interpreter has a number of functions and types built into it that are always available.P ...

  7. 无状态Http

    无状态的根本原因 浏览器和服务器使用socket通信,服务器将请求结果返回给浏览器后,会关闭当前socket连接.而且服务器会在处理页面完毕后销毁页面对象. 应用层面的原因 浏览器和服务器之间通信都遵 ...

  8. python模块之cx_Oracle

    安装cx_Oracle wget http://download.oracle.com/otn/linux/instantclient/122010/instantclient-basic-linux ...

  9. mysql 创建数据库的时候选择 utf8 bin 和 utf8 ci的区别

    utf8 ci  不区分大小写: utf8 bin 区分大小写:

  10. 5.rabbitmq 主题

    1.生产者 #!/usr/bin/env python import pika import sys connection = pika.BlockingConnection(pika.Connect ...