FIS

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

<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'
});
    原文作者:alogy
    原文地址: https://segmentfault.com/a/1190000006001840
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞