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中定位分离资源),部署到服务器上,声明依赖能力等等功能。