FIS3的简单使用

序言：

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

FIS3 是什么？能作什么？

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

一、安装：

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

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

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

注：若是npm等待时间过长建议使用淘宝镜像cnpm，等同于npm.

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

若是看到以下图说明安装成功：

二、使用：

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的配置如：

//一、文件指纹，而 FIS3 选择的是添加 MD5 戳，
// 直接修改文件的 URL，而不是在其后添加 query。
fis.match('*.{js,css,png}', {
    useHash: true
});


//二、CssSprite图片合并
//FIS3 提供了比较简易、使用方便的图片合并工具。
// 经过配置便可调用此工具并对资源进行合并。
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
    spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('*.css', {
    // 给匹配到的文件分配属性 `useSprite`
    useSprite: true
});

//三、压缩资源
//为了减小资源网络传输的大小，
// 经过压缩器对 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官网的一个例子，若有误请指出~)。