fis3学习笔记

一、fis3是什么，能干什么？

FIS3 是面向前端的工程构建工具，可以解决前端中的性能优化，其实也就和gulp差不多，只不过gulp是轻量级的，需要什么操作，下载相对应的插件，而fis3已经集成好了很多功能。

二、准备工作

1、首先要安装node和npm

2、安装fis3  -->  npm install -g fis3

3、测试一下是否安装成功 -->  fis3 -v

4、升级fis3

npm update -g fis3

或者重装 --> npm install -g fis3

三、熟悉fis3里面的命令

fis3里面内置了一个简易的web server，可以方便调试构建结果

1、fis3 server open -->打开web server的根目录（www目录）

2、fis3 release   -->将构建结果发布到web server 的目录下面

3、fis3 release -d +路径  -->构建结果发布到指定的目录下面

4、fis3 server  start   -->启动本地web server（浏览器将会被打开）

5、fis3 release -w   -->启动文件监听功能

6、fis3 release -wl   -->浏览器自动刷新

7、fis3 server -h  -->获取更多参数

8、fis3 server clean  --> 清空web server下面的www目录

9、fis3 inspect 可以查看每个文件对应分配到的属性。

四、fis3配置文件（fis-conf.js）

说明：FIS3 编译的整个流程都是通过配置来控制的。FIS3 定义了一种类似 CSS 的配置方式。固化了构建流程，让工程构建变得简单。（也就是说fis-conf.js文件上面存放所有构建指令，如压缩资源、文件指纹等等操作，通过在终端之行fis3 release -d 就会根据fis-conf.js中的指令进行构建，把结果发布到web server的www目录下面。）

配置接口：fis.match(selector, props);

参数说明：

selector：FIS3 把匹配文件路径的路径作为selector，匹配到的文件会分配给它设置的props。

props：编译规则属性，包括文件属性和插件属性

fis.media()：此接口提供多种状态状态功能（有些配置是仅供开发环境下使用，有些则是仅供生产环境使用）

fis.media('rd').match('*', {

　　deploy: fis.plugin('http-push', {

　　　　receiver: 'http://remote-rd-host/receiver.php'

　　})

});

fis.media('qa').match('*', {

　　deploy: fis.plugin('http-push', {

　　　　receiver: 'http://remote-qa-host/receiver.php'

　　})

});

终端执行：

• fis3 release rd push 到 RD 的远端机器上
• fis3 release qa push 到 QA 的远端机器上

1、资源定位：进行构建发布之后，我们可以发现构建结果中的路径进行了替换（如html中引用的js，css文件其引用路径发生变换），有原来的相对路径变成了绝对路径。这就是fis的一个重要特性，资源定位。

注意：我们还可以通过配置指令，将所有静态资源构建到指定目录下：

如：

　　fis.match('*.{png,js,css}', {

　　　　release: '/static/$0'

　　});

执行fis3 release -d ./output 

构建结果如下：

2、文件指纹（唯一表示一个文件）

fis.match('*.{js,css,png}', {
　　useHash: true
});

3、压缩资源

fis.match('*.js', { //js压缩
　　// fis-optimizer-uglify-js 插件进行压缩，已内置
　　optimizer: fis.plugin('uglify-js')
});

fis.match('*.scss', { //css压缩
　　// fis-optimizer-clean-css 插件进行压缩，已内置
　　optimizer: fis.plugin('clean-css')
});

fis.match('*.png', { //图片压缩
　　// fis-optimizer-png-compressor 插件进行压缩，已内置
　　optimizer: fis.plugin('png-compressor')
});

4、cssSprite图片合并

//只需要把css中引用的图片后缀改成 XXX.png?__sprite，实际的图片不需要改名字，（实现的原理就是css处的?__sprite就是一个让插件认识的标识符，插件会根据这个标识符进行图片合并处理，并生成对应样式）
fis.match('::package', { // 启用 fis-spriter-csssprites 插件,需下载插件
　　spriter: fis.plugin('csssprites')
})

fis.match('*.scss', { // 对 CSS 进行图片合并
　　useSprite: true
});

5、编译sass文件

//涉及到插件安装。
//安装方式尝试 :
//1、npm install fis-parser-node-sass -g
fis.match('*.scss', {
　　release:'/static/css$0',
　　rExt: '.css',
　　parser: fis.plugin('node-sass', {
　　// options...
　　})
});

6、有些时候在某种情况下面不需要使用文件指纹图片合并等操做，可以使用如下方式

fis.media('debug').match('*.{js,scss,png}', { //终端执行 fis3 release debug
　　useHash: false,
　　useSprite: false,
　　optimizer: null
})

终端执行：fis3 release debug

五、嵌入资源（内容嵌入）

给资源加?_inline参数来标记资源嵌入需求

1、在html中嵌入资源  文件后面＋?__inline（图片变成base64位,js,css会在html里面）

-->   <link rel="stylesheet" type="text/css" href="demo.css?__inline">

-->   <script type="text/javascript" src="demo.js?__inline"></script>

-->   <img title="百度logo" src="images/logo.gif?__inline"/>

2、在js中嵌入资源

-->   var img = __inline('images/logo.gif'); 

-->   var css = __inline('a.css');

-->   __inline('demo.js');

3、在css中嵌入资源

-->   @import url('demo.css?__inline');

--> .style { background: url(images/logo.gif?__inline); }

 

转载于:https://www.cnblogs.com/rxf-Boss/p/6211969.html