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'
});
