序言:

最近在收集前端的优化工具,随便一搜,厉害了word哥,有grunt、gulp、FIS3、webpack等等,简直就是眼花缭乱!
前辈们对于他们的评价各有千秋,于是乎就想每个都来用一遍(之前已经倒腾了grunt,gulp),今天倒腾fis3,看看哪个更好玩~

FIS3 是什么?能做什么?

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

1、安装:

FIS3是基于node和npm的构建工具,需要安装node,没安装node的请自行安装。

这里是参考FIS官网简单说说windows如何安装和使用,

打开cmd输入命令:npm install -g fis3

注:如果npm等待时间过长建议使用淘宝镜像cnpm,等同于npm.

输入以上命令等待安装完成之后再输入:fis3 -v

如果看到如下图说明安装成功:

2、使用:

fis3不像grunt、gulp使用时候很多插件还要配置,因为fis3很多已经内置,只需要配置下一个必须文件:fis-conf.js即可。

下面介绍几个常用的配置例子,(例子下载),例子目录:app是项目的开发环境,build是空文件夹,是生产环境(即fis-conf.js配置之后,输入一键配置)

A:文件指纹,文件指纹,唯一标识一个文件。在开启强缓存的情况下,如果文件的 URL 不发生变化,无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存,一种方式是添加时间戳,每次上线更新文件,给这个资源文件的 URL 添加上时间戳。

而 FIS3 选择的是添加 MD5 戳,直接修改文件的 URL,而不是在其后添加 query。如下

B:CssSprite图片合并,

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

FIS3 提供了比较简易、使用方便的图片合并工具。通过配置即可调用此工具并对资源进行合并。

FIS3 构建会对 CSS 中,路径带 ?__sprite 的图片进行合并。为了节省编译的时间,分配到 useSprite: true 的 CSS 文件才会被处理配置如下。

C:资源压缩,为了减少资源网络传输的大小,通过压缩器对 js、css、图片进行压缩是一直以来前端工程优化的选择。在 FIS3 中这个过程非常简单,通过给文件配置压缩器即可。配置如下

最后这个完整的fis-conf.js的配置如:

//1、文件指纹,而 FIS3 选择的是添加 MD5 戳,
// 直接修改文件的 URL,而不是在其后添加 query。
fis.match('*.{js,css,png}', {
useHash: true
}); //2、CssSprite图片合并
//FIS3 提供了比较简易、使用方便的图片合并工具。
// 通过配置即可调用此工具并对资源进行合并。
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
}); //3、压缩资源
//为了减少资源网络传输的大小,
// 通过压缩器对 js、css、图片进行压缩是一直以来前端工程优化的选择。
// 在 FIS3 中这个过程非常简单,通过给文件配置压缩器即可。
// 清除其他配置,只保留如下配置
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')
});

  配置好之后命令行进入app目录下,输入如下命令(即整体创建到app父级目录下的build目录下,即生产环境下):

fis3 release -d ../build

此时再看看build目录下的文件如下图:

仔细看有md5戳,文件都是压缩后的,自动生成雪碧图(此例子是模仿fis3官网的一个例子,如有误请指出~)。

FIS3的简单使用的更多相关文章

  1. 前端构建工具-fis3使用入门

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...

  2. fis3简单教程

    #进入工作目录初始化fis3目录(此步非必须,如果当前目录已有fis-conf.js文件,可以不用初始化)fis3 init#部署(<path>为部署目录,如果想部署到当前output目录 ...

  3. 基于fis3的组件可视化道路

    首先说明一下,即使不熟悉fis3,阅读文本应该也会有所收获. 本文以fis-parser-imweb-tplv2插件为模板插件,目的不在于使用哪个模板,而是组件可视化的实现思路,不必担心. 先说说模板 ...

  4. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  5. 基于流的自动化构建工具------gulp (简单配置)

    项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...

  6. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  7. 前端工程构建工具FIS3

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 一.安装 全局安装fis3 ...

  8. 利用fis3构建前端项目工程

    FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...

  9. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...

随机推荐

  1. 关于如何在github上创建团队开发环境

    今天想写个如何在github上创建团队开发环境的博客.送给那些还不知道如何在github上创建团队开发环境的开发人员. 1.首先,当然你要有个github的账号.具体怎么注册我这里就不说了.可以上gi ...

  2. jQuery通过parent()和parents()方法访问父级元素

    <div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...

  3. Distribution1:Distribution Reader

    在transactional replication中,在publication中执行了一个更新,例如:update table set col=? Where ?,如果table中含有大量的数据行, ...

  4. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  5. 【转】C#调用Windows图片和传真查看器打开图片

    //建立新的系统进程 System.Diagnostics.Process process = new System.Diagnostics.Process(); //设置文件名,此处为图片的真实路径 ...

  6. java获取类的信息

    关键技术剖析 1.java.lang.reflect包实现了java的反射机制,在使用反射机制时,需要导入该包. 2.Class类的forName方法能够根据类名加载类,获得类的Class对象. Cl ...

  7. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  8. Don't let self-built concept imprison yourself

    If Self-inferiority is disease, but self-confidence is hazard. Leo moon personalities can be extreme ...

  9. [linux]ssh(转载)

    ssh登陆问题 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则su ...

  10. (十五)WebGIS中平移功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...