fis3基本用法介绍

发表于 | 分类于 |

今天有这样一个需求，其实是很常见的。一般我们公司都是静态资源放在一个机器上，比如是cdn上。然后内容页面放在另外一个机器上。这样很好的一点是cdn可以做缓存。而且整个分离看起来也比较清楚。

在本地，我用的相对路径比如./images/1.png 或者绝对路径 images/1.png 。这样写第一不统一。第二，我需要把图片，js，css放到cdn上，比如说是：**.qq.com上。但是页面又是在另外一个机器上，或者说域名下，所以很明显这个时候不能用相对路径了，只能用url的形式。

那么，我要怎么去改呢？难道手工一个个的去改？那不是很麻烦，而且应该想到公司那么多人，肯定不是用的这种笨一点的方法。一般有用gulp的，有用webpack的。今天我在师傅的建议下去学习了fis的。fis用很少量的配置，就完成了我需要的功能。唯一一点我觉得不好的，就是文档了，文档要是写的更好一点，接地气一点就更好啦。

FIS简介

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

FIS是百度出品的，一般的gulp有的功能，它基本都有。下面有几个fis的几个特点：

  1. FIS3 的构建不会修改源码，而是会通过用户设置，将构建结果输出到指定的目录。
  2. 文件指纹，唯一标识一个文件。在开启强缓存的情况下，如果文件的 URL 不发生变化，无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存，一种方式是添加时间戳，每次上线更新文件，给这个资源文件的 URL 添加上时间戳。
  3. CssSprite图片合并压缩了静态资源，我们还可以对图片进行合并，来减少请求数量。FIS3 提供了比较简易、使用方便的图片合并工具。通过配置即可调用此工具并对资源进行合并。FIS3 构建会对 CSS 中，路径带 ?__sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。

其实这些功能其它的几种方案应该都有，但是fis会更加方便。第一个深深的吸引着我。不改变源码真是太好了。具体原因下文分析。

FIS初识

安装

安装必须在全局环境下：

1
2
3
npm install -g fis3  //安装
fis3 -v  //查看
npm update -g fis3  //升级

完整例子

1
2
touch fis-conf.js  //生成默认配置文件
fis3 release -d ../output    //构建到上级目录下 ../output可以换成任意path

简单的对比下output和源文件中的内容，可以发现不同，资源路径已经被换了。可以利用diffmerge工具来看。下面来自文档中的一个图片。

比较图片

我们可以很明显看到相对路径已经被替换成了绝对路径。再加深一点，如何压缩js,css呢？我们只需要调用它内置的插件就可以了。

fis通过正则匹配文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/ 清除其他配置，只保留如下配置
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')
});

那么怎么解决我们开头说的那个问题呢？很简单，我们加一个release和url：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fis.match('*', {
  useHash: false
});

// 所有的 js
fis.match('js/*.js', {
    //发布到/static/js/xxx目录下
    optimizer: fis.plugin('uglify-js'),
    release : '/dist/$0',
    url : '//midas.gtimg.cn/**/dist$0'
});

// 所有的 css
fis.match('css/*.css', {
    //发布到/static/css/xxx目录下
    optimizer: fis.plugin('clean-css'),
    release : '/dist/$0',
    url : '//midas.gtimg.cn/**/dist$0'
});

先压缩，在发布到某个dist下去，然后真正发布的时候用某个url替换。这个url就可以换成我们的cdn上的链接。然后我们把压缩后的dist文件对应上传到cdn上去就可以了。 我们看下最后的结果是不是跟我们想的一样： :)

differ对比结果

是不是很简单的配置就完成了？这里可以留一个思考的地方，就是你会发现上面替换都是替换html里面的，那如果css/js里面也有路径要替换，打比方css里面引入了图片路径怎么破呢？

FIS其他功能

刚刚是已一个简单的例子，告诉我们fis的工作很简单的配置就可以完成了。现在我们看看fis还能干什么。

  1. 压缩文件,图片（资源）
  2. 重定向文件目录和url

刚刚已经说了上面，下面我们看看还有什么功能：

文件指纹

文件指纹，唯一标识一个文件。在开启强缓存的情况下，如果文件的 URL 不发生变化，无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存，一种方式是添加时间戳，每次上线更新文件，给这个资源文件的 URL 添加上时间戳。 FIS3 选择的是添加 MD5 戳，直接修改文件的 URL，而不是在其后添加 query。

对 js、css、png 图片引用 URL 添加 md5 戳，配置如下

1
2
3
4
5
6
7
8
9
10
//一般方法
<img src="a.png?t=12012121">

//清除其他配置，只剩下如下配置 
fis.match('*.{js,css,png}', {
  useHash: true
});

//执行输出
fis3 release -d ../output

对比结果

CssSprite图片合并

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

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

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

在上一张对比图片里面是不是有一个多余的style开头的png,那个就是图片合并后的两个文件：

因为我们在css里面：

1
2
3
4
5
6
7
li.list-1::before {
  background-image: url('./img/list-1.png?__sprite');
}

li.list-2::before {
  background-image: url('./img/list-2.png?__sprite');
}

设置了两个以?__sprite的图片，所以他们会合并了。好方便。当然不以这个结尾的肯定不会合并了。合并的好处当然就是减少请求数量。当然了，fis会自动帮你把精灵图重新定位。所以你会发现你的css会多了下面这些代码：

1
2
3
4
5
content:"";
position:absolute;
height:15px;
width:15px;
left:-15px

关闭默认配置、查看文件属性

这个时候我们利用重要的指令fis3 inspect可以查看文件分配到的属性，这些属性决定了文件将如何被编译处理。

1
fis3 inspect //查看文件命中属性的情况

查看文件属性

因为有一些功能是默认开启了，所以我们可以利用开启debug模式，关闭这些：

1
2
3
4
5
fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})

fis3 release debug 启用 media debug 的配置，覆盖上面的配置，把诸多功能关掉。

调试

FIS3 构建后，默认情况下会对资源的 URL 进行修改，改成绝对路径。这时候本地双击打开文件是无法正常工作的。这给开发调试带来了绝大的困惑。

FIS3 内置一个简易 Web Server，可以方便调试构建结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
//构建时不指定输出目录，即不指定 -d 参数时，构建结果被发送到内置 Web Server 的根目录下。此目录可以通过执行以下命令打开。
fis3 server open

//不加 -d 参数默认被发布到内置 Web Server的根目录下，当启动服务时访问此目录下的资源。
fis3 release

//启动本地 Web Server访问http://127.0.0.1:8080
fis3 server start

//FIS3 支持文件监听
fis3 release -w
//浏览器自动刷新
fis3 release -wL

总结

上面的内容只是一小部分功能，还有很多其他的功能，比如嵌入资源（import等等），定位资源（从html,css,js中定位分离资源），部署到服务器上，声明依赖能力等等功能。