fis 使用入门简介 - 文章教程

fis 使用入门简介

发布于 2021-07-31 字数 11959 浏览 922 评论 0

本文对 fis 进行概要性的介绍,由于篇幅原因,不会涉及太多使用、设计上的细节。想要了解更多,可参考官方文档。

什么是 FIS

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。专注于前端构建,无需进行任何配置轻松应付常见需求。

fis 使用入门简介

特点

个人总结

  1. 贴近前端工程实际(前端项目的构建需求、问题基本都已经帮你考虑到了)
  2. 配置合理、灵活
  3. 高效
  4. 易扩展

官方说明

三条命令,满足大部分的构建需求(每个命令带有数量不等的参数)

  • fis install:命令安装fis仓库提供的各种 组件、框架、示例、素材、配置等 开发资源。
  • fis release:命令用于编译并发布的你的项目,拥有多个参数调整编译发布操作。
  • fis server:命令可以启动一个本地调试服务器用于预览 fis release 产出的项目。
  • 跨平台:基于 node 搭建,可运行于 windows、mac、linux 等平台
  • 快速构建:合理的构建流程设计,有效提高构建性能
  • 性能优化:内置支持文件压缩、打包等
  • 本地调试:内建支持的server,方便本地调试(有java、node版)
  • 灵活扩展:插件扩展、二次开发等蛮方便的
  • 轻松上手:上手即用是没问题的,如果希望个性化定制,需对fis的整体架构设计有一些了解(单文件编译流程、插件扩展点神马的)

fis 使用入门简介

fis 使用入门简介

环境搭建

npm install -g fis # 安装fis
npm install -g lights # fis采用lights管理资源;要求node版本在v0.10.27以上

demo 示例

假设项目如下,这里主要展示几种能力:

  1. 资源嵌入
  2. 资源定位
  3. 资源优化
  4. 本服务器
  5. 打包
fis-first-demo/
└── src
  ├── css
  │   └── main.css
  ├── img
  │   ├── avatar.png
  │   └── saber.jpeg
  ├── index.html
  ├── js
  │   ├── lib.js
  │   ├── main.js
  │   └── util.js
  └── saber.png

运行如下命令

fis release -o 
fis server start

fis 使用入门简介

资源嵌入

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

资源定位

下面图片,release 后生成到 /static/avatar.png

<img class="avatar" src="img/avatar.png" width="115" height="115" />

配置文件 fis-conf.js

fis.config.merge({
  roadmap : {
    path : [
      {
        //所有的js文件
        reg : '**.js',
        //发布到/static/xxx目录下
        release : '/static/$&'
      },
      {
        //所有的css文件
        reg : '**.css',
        //发布到/static/xxx目录下
        release : '/static/$&'
      },
      {
        //所有img目录下的.png,.gif文件
        reg : /^\/img\/(.*\.(?:png|gif))/i,
        //发布到/static/xxx目录下
        release : '/static/$1'
      }
    ]
  }
});

资源优化

.clear{clear: both;}
.intro{margin: 10px;}
.intro .avatar{float: left;}
.intro .wording{float: left; margin-left: 10px;}

优化后

.clear{clear:both}.intro{}.intro .avatar{float:left}.intro .wording{float:left}

本地服务器

fis server start --type node

项目配置

按照配置粒度划分,fis的配置主要包括几项:

  1. project:项目配置,如编码、支持文件类型等
  2. modules:插件配置,指明用特定的插件来处理特定类型的文件。跟settings两者需要进行区分
  3. settings:针对具体插件的配置
  4. roadmap:定制项目文件属性。常用的配置项为同步路径的配置(从src到dist之间的映射)、线上路径的映射。
  5. pack:配置要打包的文件。并不会对文件进行实际打包操作,而是生成一份打包关系映射表map.json,如需实际打包,可根据这份表自行定制打包方案。
  6. deploy:部署相关的配置。

fis 使用入门简介

简单例子

下面是来自官方的例子:

//fis-conf.js
fis.config.merge({
  modules : {
    parser : {
      //coffee后缀的文件使用fis-parser-coffee-script插件编译
      coffee : 'coffee-script',
      //less后缀的文件使用fis-parser-less插件编译
      //处理器支持数组,或者逗号分隔的字符串配置
      less : ['less'],
      //md后缀的文件使用fis-parser-marked插件编译
      md : 'marked'
    }
  },
  roadmap : {
    ext : {
      //less后缀的文件将输出为css后缀
      //并且在parser之后的其他处理流程中被当做css文件处理
      less : 'css',
      //coffee后缀的文件将输出为js文件
      //并且在parser之后的其他处理流程中被当做js文件处理
      coffee : 'js',
      //md后缀的文件将输出为html文件
      //并且在parser之后的其他处理流程中被当做html文件处理
      md : 'html'
    }
  }
});
//配置字符串全部转换为ascii字符
fis.config.merge({
  settings : {
    optimizer : {
      'uglify-js' : {
        output : {
          ascii_only : true
        }
      }
    }
  }
});

插件开发

首先需要理解fis的单文件编译过程:

fis 使用入门简介

实际例子:fis-optimizer-test

配置:

fis.config.merge({
  modules : {
    optimizer : {
      //js后缀文件会经过fis-optimizer-test插件的压缩优化
      js : 'test'
    }
  }
});

插件源码:

/*
 * fis插件示例
 * http://www.cnblogs.com/chyingp/p/fis-plugins-optimize.html
 */
'use strict';

module.exports = function(content, file, conf){
  return content+'\nvar nick ="程序猿小卡"';
};

fis release -o就可以看到效果了

console.log('inline file');

function hello(argument) {
  var nick = 'casper';
  var age = 26;
}
var nick ="casper"  // 这货就是fis-optimizer-test加上的

打包

前面提到过,fis的打包只是生成一份映射表map.json,具体的打包方案需要用户自行定制。

打包规则来源

  1. 依赖声明
  2. 显示声明

依赖声明

比如在 index.html 里声明依赖

<!--
  @require demo.js
  @require "demo.css"
-->

编译后生成

{
  "res" : {
    "demo.css" : {
      "uri" : "/static/css/demo_7defa41.css",
      "type" : "css"
    },
    "demo.js" : {
      "uri" : "/static/js/demo_33c5143.js",
      "type" : "js",
      "deps" : [ "demo.css" ]
    }
  },
  "pkg" : {}
}

显示声明

打包配置如下:

//fis-conf.js
fis.config.merge({
  pack : {
    //打包所有的demo.js, script.js文件
    //将内容输出为static/pkg/aio.js文件
    'pkg/aio.js' : ['**/demo.js', /\/script\.js$/i],
    //打包所有的css文件
    //将内容输出为static/pkg/aio.css文件
    'pkg/aio.css' : '**.css'
  }
});

生成的表 map.json

{
  "res": {
    "demo.css": {
      "uri": "/static/css/demo_7defa41.css",
      "type": "css",
      "pkg": "p1"
    },
    "demo.js": {
      "uri": "/static/js/demo_33c5143.js",
      "type": "js",
      "deps": [
        "demo.css"
      ],
      "pkg": "p0"
    },
    "index.html": {
      "uri": "/index.html",
      "type": "html",
      "deps": [
        "demo.js",
        "demo.css"
      ]
    },
    "script.js": {
      "uri": "/static/js/script_32300bf.js",
      "type": "js",
      "pkg": "p0"
    },
    "style.css": {
      "uri": "/static/css/style_837b297.css",
      "type": "css",
      "pkg": "p1"
    }
  },
  "pkg": {
    "p0": {
      "uri": "/static/pkg/aio_5bb04ef.js",
      "type": "js",
      "has": [
        "demo.js",
        "script.js"
      ],
      "deps": [
        "demo.css"
      ]
    },
    "p1": {
      "uri": "/static/pkg/aio_cdf8bd3.css",
      "type": "css",
      "has": [
        "demo.css",
        "style.css"
      ]
    }
  }
}

二次开发

官方介绍

1、简单的一个配置即可成为另外一个工具
2、自定义插件 + 规范 +  一个解决诸多问题的解决方案

FIS具有高扩展性,可以通过配置进行各种目录结构等的定制,同时FIS拥有足够数量的插件,用户可以下载这些插件,配置使用。也可以按照自己的需求开发定制插件。可能有些人会问,如果插件多了后该如何维护。其实,FIS具有可包装性。比如现在市面上的fis-plus、gois、jello、spt等都是包装了FIS,可以使用这种包装性,把多个插件以及 FIS 包装成为新的一个工具。这就是为什么FIS会定义为工具框架的原因。

上面的介绍来自官方文档。对于为何需要二次开发,个人的看法是:

  1. 满足定制需求
  2. 解决 诸多问题,这里除了项目本身的需求,还有工具本身可能存在的问题,如 fis、fis 插件的升级、多版本并存问题(fis 是全局安装的,升个级,所有项目跑不转了这可摊上大事了。)
drwxr-xr-x  10 nobody  staff  340  7  2 23:14 colors
drwxr-xr-x   7 nobody  staff  238  7  2 23:14 commander
drwxr-xr-x   7 nobody  staff  238  7  2 23:14 fis-command-install
drwxr-xr-x  11 nobody  staff  374  7  2 23:14 fis-command-release
drwxr-xr-x   9 nobody  staff  306  7  2 23:14 fis-command-server
drwxr-xr-x   9 nobody  staff  306  7  2 23:14 fis-kernel
drwxr-xr-x   8 nobody  staff  272  7  2 23:14 fis-optimizer-clean-css
drwxr-xr-x   8 nobody  staff  272  7  2 23:14 fis-optimizer-png-compressor
drwxr-xr-x   8 nobody  staff  272  7  2 23:14 fis-optimizer-uglify-js
drwxr-xr-x   7 nobody  staff  238  7  2 23:14 fis-packager-map
drwxr-xr-x   7 nobody  staff  238  7  2 23:14 fis-postprocessor-jswrapper
drwxr-xr-x   8 nobody  staff  272  7  2 23:14 fis-spriter-csssprites

对比 grunt

经常有人拿 grunt、fis 进行对比,其实两者并不是同一层面的内容。grunt 是前端构建工具,而 fis 则是前端集成解决方案。

举个不是很恰当的例子,就拿 http 协议、浏览器的关系来说吧。

  • grunt:制定了 http 协议,但想要浏览网页,你得先开发个浏览器
  • fis:制定了 http 协议,同时提供了浏览器。你还可以安装一些扩展。

这里就讲 fis 相对于 grunt 的优势

  1. 更贴近前端工程实际
  2. 更加灵活合理的配置
  3. 更加高效的构建流

官网:http://fis.baidu.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0