Fis简介

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

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

1. lint： 代码规范

2. parser：代码编译

3. perprocessor： 前置处理

4. standard：代码标准化

5. protprocessor： 后置处理

6. optimizer： 优化处理

7. perpackager： 前置打包

8. packager：打包过程

9. spriter： 图片制作精灵图

10. postpackager： 后置打包

11. deploy: 发布

fis-conf

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

release

release指令

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

fis release -d test

文件监听机制

fis 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.

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

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

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

/* 第一步 */.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

![超级产品经理](https://segmentfault.com/a/img/02.png?__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配置.

// 压缩cssfis.match(' .css', {    optimizer: fis.plugin('clean-css'),    packTo: 'css/app.css'});// 压缩jsfis.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'});

关键字：JavaScript, fis, fis3

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！