资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/FIS

FIS

mdluo / 868人阅读

摘要：执行这个指令，对项目进行发布。寻找文件，放在文件底下寻找文件，放在文件底下中语法拓展，我们可以将表示除拓展名以外的任何字符。告知，需要制作精灵图。替换内置打包工具中的路径不会自动修改。配置规范规范插件入口，引入文件方式不同。

Fis简介

一个工程化的工具，主要用来处理前端的项目。
作用：代码合并，代码压缩，资源定义，资源嵌套等等。

fis 是基于流的处理，fis有自己的一个流处理过程：

lint： 代码规范

parser：代码编译

perprocessor： 前置处理

standard：代码标准化

protprocessor： 后置处理

optimizer： 优化处理

perpackager： 前置打包

packager：打包过程

spriter： 图片制作精灵图

postpackager： 后置打包

deploy: 发布

fis-conf

使用fis必须配置fis-conf文件，是fis的入口文件，fis-conf文件名是固定的，而且项目中必须要有此文件

release

release指令

发布。执行这个指令，对项目进行发布。
参数： -d 发布到某个目录下，后面加上目录的名称，这个目录相对于fis-conf这个文件.

fis3 release -d test

文件监听机制

fis3 release -wd test
match

match()方法

捕获文件，执行流中的方法.
参数1：获取的文件
参数2：处理文件的配置信息。

// 寻找js 文件， 放在js文件底下
fis.match("**.js", {
    release: "js/$0"
});

// 寻找css 文件， 放在css文件底下
fis.match("**.css", {
    release: "css/$0"
});
globs

fis中globs语法
拓展，我们可以将**表示除拓展名以外的任何字符。
对于多个文件类型处理，我们可以用{}，通过，实现对多个文件获取
$0可以获取前面匹配的文件

fis.match("**.{js,css}", {
    release: "public/$0"
});
fis中的插件

使用插件： fis-plugin();方法。
参数1：插件名称。(需要取出插件前缀)

例如：css压缩插件是fis-optimizer-clean-css
前缀是：fis-optimizer
名称： clean-css

需要在match() 的配置参数中使用。

fis.match("project/**.css", {
    
    optimizer: fis.plugin("clean-css")
    
});

配置属性
packTo ： 打包参数属性
release： 是否发布，$0 捕获匹配的文件
userHash: 添加戳
userSprite：处理css文件，告知fis3制作精灵图

css压缩

css压缩插件： clean-css

fis.match("project/**.css", {
    
    optimizer: fis.plugin("clean-css")
    
});
js压缩

js压缩插件：uglify-js

fis.match("index.js", {
    optimizer: fis.plugin("uglify-js")
});
图片PNG优化

png图片优化插件： fis-optimizer-png-comperessor

fis将图片压缩内置到包中，只能处理png格式的文件，(png的优化比例最高). fis内置了png格式优化的插件。

fis.match("demo.png", {
    optimizer: fis.plugin("png-compressor")
})
精灵图

fis实现精灵图插件：fis-spriter-csssperiter.

找到css中的那些图片需要制作精灵图，通过 ?__sprite。 这个标识符区分那个图片需要制作精灵图。

在fis中配置，说明那些css图片要做精灵图处理。 userSprite：true。告知fis，需要制作精灵图。

精灵图在流的处理的倒三步，是在打包以后，因此制作过程要再打包过程中处理。

/* 第一步 */
.item1 span {
    background: url(../img/01.png?__sprite) center no-repeat;
}

// 第二步
fis.match("**.css", {
    "useSprite": true
});

// 第三步
fis.match("::package", {
    "spriter": fis.plugin("csssprites") 
});

::pageage表示某个过程

指纹

为请求的资源文件后面后缀添加名称，为了防止文件更新浏览器缓存。

fis.match("**.{js,css,png}", {
    "useHash": true
});
嵌入技术 图片嵌入

在图片路径添加?__inline
css嵌入资源

嵌入CSS文件，@import 通过设置文件路径, 在路径末尾 ?__inline
嵌入图片 ?__inline

@import url("css.css?__inline");
.item {
    background: url(../img/04.png?__inline) center;
}
js嵌入资源

嵌入JS文件，通过__inline( url ); 方法
嵌入CSS文件，通过__inline( url );
嵌入img ,通过__inline( url );
在JS文件中嵌入JS，CSS，img文件不需要在路径末尾加?__inline

__inline("demo.js")  // 不需要加分号 ，加分号fis3 会补一个分号，编译后，会变成两个分号

var imgSrc = __inline("../img/01.png"); // 编译后是base64的图片

var styles = __inline("../css/css.css"); // 编译后： var styles = "body{background:#0ff}";
打包

fis内置了打包工具，但是有局限性（引入的原始路径并不会修改），通过packTo配置.

// 压缩css
fis.match("**.css", {
    optimizer: fis.plugin("clean-css"),
    packTo: "css/app.css"
});


// 压缩js
fis.match("**.js", {
    optimizer: fis.plugin("uglify-js"),
    packTo: "js/app.js"
});

打包插件：fis3-postpackager-loader。 替换内置打包工具中的路径不会自动修改。

// 修改打包路径
fis.match("::package", {
    postpackager: fis.plugin("loader")
});
模块化开发中应用

fis在模块化开发中应用

fis.hook(). 添加钩子插件
参数插件名称

seajs 使用 fis-hook-cmd 插件

在match();中配置 isMod: 表是是否模块化.

cmd规范

插件:fis-hook-cmd

在模块化文件中不需要定义模块，不需要定义define(); 直接通过require();引用需要的需要的模块即可。fis编译的时候会通过配置模块规范自动添加模块的代码。

// 配置cmd规范
fis.hook("cmd");

fis.match("js/**.js", {
    isMod: true
});

amd 规范

插件： fis-hook-amd

入口，引入文件方式不同。

// 钩子
fis.hook("amd");
fis.match("js/**.js", {
    isMod: true
});

commonjs

插件：fis-hook-commonjs
mod.js




fis.hook("commonjs");

fis.match("js/**.js", {
    isMod: true,
    packTo: "js/all.js"
});
GPU云服务器 云服务器 fis fis3 fis3 cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86393.html

相关文章

  • Java编程基础21——IO(字节流)

    摘要：流按操作类型分为两种字节流字节流可以操作任何数据因为在计算机中任何数据都是以字节的形式存储的字符流字符流只能操作纯字符数据，比较方便。 1_IO流概述及其分类 1.概念 IO流用来处理设备之间的数据传输 Java对数据的操作是通过流的方式 Java用于操作流的类都在IO包中 流按流向分为两种：输入流，输出流。 流按操作类型分为两种： 字节流 : 字节流可以操作任何数据,因为在...

    yanbingyun1990 评论0 收藏0

  • IO字节流8,9InputStream以及输入流读取字节数据

    摘要：字节输入流此抽象类是表示字节输入流的所有类的超类。定义了所有子类共性的方法从输入流中读取数据的下一个字节。从输入流中读取一定数量的字节，并将其存储在缓冲区数组中。关闭此输入流并释放与该流关联的所有系统资源。 package com.itheima.demo02.InputStream; import java.io.FileInputStream;import java.io.IOEx...

    wmui 评论0 收藏0

  • 前端开发手札fis篇——关于部署目录的问题

    摘要：部署问题由于部署生成的文件路径是网站目录根开始的如，导致网站发布必须是目录根才能有效加载。这是怎样处理更方便呢解决方法可以使用替换脚本脚本，会搜着目录下的所有文件并在开头的路径前面添加参数。 用了差不多一年多的fis，感觉他比其他构建工具更容易上手，扩展插件也比较多。但是诟病也是有的，比如接下来要说的部署问题，虽然fis3本身也有比较好的方案解决（设置url参数），但是对于部署不是给内...

    goji 评论0 收藏0

  • 1、字节流 2、字符流

    摘要：用两个字节表示。两个字节第一个字节是负数第二个字节可能是正数目前最常用的中文码表，万的中文和符号。用两个字节表示，其中的一部分文字，第一个字节开头是，第二字节开头是最新的中文码表，目前还没有正式使用。 01输入和输出 * A:输入和输出 * a: 参照物 * 到底是输入还是输出，都是以Java程序为参照 * b: Output * 把内存...

    asoren 评论0 收藏0

  • Java编程基础23——IO(其他流)&Properties

    摘要：但它融合了和的功能。支持对随机访问文件的读取和写入。的概述和作为集合的使用了解的概述类表示了一个持久的属性集。可保存在流中或从流中加载。属性列表中每个键及其对应值都是一个字符串。 1_序列流(了解) 1.什么是序列流 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推. 2.使用方式 整合两个: S...

    vvpale 评论0 收藏0

发表评论

登陆后可评论

0条评论

mdluo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<