FIS

时间 2019-12-05

标签 fis 繁體版

原文原文链接

Fis简介

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

fis 是基于流的处理，fis有本身的一个流处理过程：css

lint：代码规范html
parser：代码编译前端
perprocessor：前置处理java
standard：代码标准化浏览器
protprocessor：后置处理缓存
optimizer：优化处理app
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

<img src="img/02.png?__inline" alt="">

/* 样式中添加 */
background: url(../img/03.png?__inline) center;

html嵌入资源

HTML模板嵌入，经过link标签嵌入，rel属性是import，而且href 模版路径后添加?__inline
CSS嵌入，经过link引入css,路径后添加?__inline
JS嵌入，经过script引入JS，路径后添加?__inline
图片嵌入，img标签引入图片，路径末尾添加?__inline

<body>

    <!-- HTML模板嵌入 -->
    <link rel="import" type="text/css" href="tpl/tpl.html?__inline" />
    
    <!-- CSS嵌入 -->
    <link rel="stylesheet" type="text/css" href="css/index.css?__inline"/>

    <!-- JS嵌入 -->    
    <script src="js/index.js?__inline" type="text/javascript" charset="utf-8"></script>

</body>

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

<!-- 文件须要引入mod.js -->
<script type="text/javascript" src="mod.js"></script>

fis.hook('commonjs');

fis.match('js/**.js', {
    isMod: true,
    packTo: 'js/all.js'
});