zoukankan      html  css  js  c++  java
  • FIS-前端工具框架(自动化工具、性能优化、资源压缩、资源合并)

    公司使用FIS来对前端资源进行管理,常用于资源压缩、资源合并、添加版本号(解决缓存问题)等。下面是记录了安装和常用的一些命令。

    安装

    1.首先安装nodejs,因为FIS使用Node.js开发,以npm包的形式发布。
     
    2.安装fis。在命令行输入:npm install -g fis
     
    3.启动fis(启动FIS的本地调试服务器功能对构建发布的项目进行预览调试):fis server start
         本地调试服务器启动成功后,就会自动打开 http://127.0.0.1:8080 ,但是此时服务器内没有任何内容。我们还需要通过FIS发布DEMO项目才能进行预览
     
    4.进入目录并发布项目:
         cd fis-quickstart-demo #进入DEMO目录
         fis release
    fis release 命令会将编译后的项目发布至本地调试服务器,再次刷新浏览器页面,我们就可以到fis-quickstart-demo项目的主页了。
     
     
    资源压缩:
    资源压缩一直是前端项目优化中非常重要的一环,使用FIS我们无需任何配置,只需要一个命令就可以完成压缩工作。
     
    fis release --optimize
    如果觉得参数输入比较麻烦,实际上也支持参数缩写,更多的参数可以参考 fis release -h 或命令行。
     
    fis release -o
    FIS构建并不会修改源代码目录中的内容,而是拥有独立的产出的目录,FIS默认的产出目构录可以通过 fis server open 打开,你也可以通过 fis release -d <path/to/output> 指定你希望的输出目录,详情可以参考FAQ
     
    <path/to/output> 你想输出到的文件夹路径,你可以随意指定,比如 ./output、../output、D:output。例如: fis release -d ./output
     
    查看一下网站的静态资源,我们会发现脚本、样式、图片资源都已经压缩完成。无需额外的插件和配置编写,一条命令就完成了压缩工作,是不是非常方便快捷?
     
    FIS默认会调整所有资源引用的相对路径为绝对路径,如果只是单纯的希望对项目的脚本、样式、图片进行压缩,不希望对资源引用地址做调整,可以直接使用基于FIS封装的spt。
     
    添加文件版本(md5戳)
    FIS能够根据静态资源的内容自动生成文件版本,自动更新资源引用路径,解决缓存更新问题,告别手动更新时间戳。
     
    我们通过开启 --md5 参数,为项目中的静态资源添加md5版本号
     
    fis release --optimize --md5 # fis release -om
    刷新页面,我们可以看到所有资源均加上了md5版本号
     
     
    资源合并
    安装资源合并的插件:npm install -g fis-postpackager-simple
     
    以上只是记录了一些常用的。
    FIS还有很多其他功能,也可以用于插件的开发,具体参考官网:
    http://fex.baidu.com/fis-site/docs/beginning/getting-started.html
     
  • 相关阅读:
    1038 Recover the Smallest Number (30分) sort-cmp妙用(用于使字符串序列最小)
    1033 To Fill or Not to Fill (25分)贪心(???)
    1030 Travel Plan (30分) dij模板题
    1020 Tree Traversals (25分)(树的构造:后序+中序->层序)
    1022 Digital Library (30分) hash模拟
    1018 Public Bike Management (30分)(Dijkstra路径保存fa[]+DFS路径搜索)
    1017 Queueing at Bank (25分)模拟:关于事务排队处理
    1014 Waiting in Line (30分)队列模拟题
    1010 Radix (25分)暴力猜数or二分猜数
    HDU 3032 multi-sg 打表找规律
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/5329803.html
Copyright © 2011-2022 走看看