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图片合并
压缩了静态资源,还可以对图片进行合并,来减少请求数量
FIS构建工具学习(一)的更多相关文章
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- NPM、nodeJS安装,grunt自动化构建工具学习总结
一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...
- gulp构建工具学习汇总
前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- Gradle项目构建工具学习笔记(持续更新中。。。)
1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle ...
- 学习笔记——Maven实战(六)Gradle,构建工具的未来?
Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们 ...
- Grunt构建工具能做哪些事?
Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...
随机推荐
- 数组中的each 和 jquery 中的 each
数组的实例上都有一个叫做 forEach 的方法,这个方法定义在 Array.prototype 上,所以数组的所有实例都可以使用 forEach 这个方法. forEach 方法的语法结构如下: v ...
- discuz2.5登录后台闪退的解决办法
今天突然发现discuz2.5论坛后台进不去,开始以为密码错了,但发现登录后也是闪退.我试着清除浏览器cookie,也换了其他浏览器也没有用,还是上网找找吧! discuz2.5进入后台闪退的原因: ...
- NASA: Seeing Jupiter(注视木星)
This image of Jupiter’s southern hemisphere was captured by NASA’s Juno spacecraft on the outbound l ...
- 2017百越杯反序列化writeup
去年的了,之前也有研究过.只是因为感觉PHP反序列化挺好玩的所以就再研究了一遍.总之感觉反序列化漏洞挺好玩的. 题目代码: <?php class home{ private $method; ...
- MAC和PHY的区别 (转自http://www.cnblogs.com/feitian629/archive/2013/01/25/2876857.html)
一块以太网网卡包括OSI(开方系统互联)模型的两个层.物理层和数据链路层.物理层定义了数据传送与接收所需要的电与光信号.线路状态.时钟基准.数据编码和电路等,并向数据链路层设备提供标准接口.数据链路层 ...
- 26_Python的内置函数
The Python interpreter has a number of functions and types built into it that are always available.P ...
- 无状态Http
无状态的根本原因 浏览器和服务器使用socket通信,服务器将请求结果返回给浏览器后,会关闭当前socket连接.而且服务器会在处理页面完毕后销毁页面对象. 应用层面的原因 浏览器和服务器之间通信都遵 ...
- python模块之cx_Oracle
安装cx_Oracle wget http://download.oracle.com/otn/linux/instantclient/122010/instantclient-basic-linux ...
- mysql 创建数据库的时候选择 utf8 bin 和 utf8 ci的区别
utf8 ci 不区分大小写: utf8 bin 区分大小写:
- 5.rabbitmq 主题
1.生产者 #!/usr/bin/env python import pika import sys connection = pika.BlockingConnection(pika.Connect ...