首先安装fis
npm install -g fis3
例子
在正式介绍 FIS3 功能之前,我们给定一个简单的例子,例子下载地址 demo-simple
命令
进入项目根目录,执行命令,进行构建。
一般是在fis-conf.js下进行,为什么要在这个文件下进行了,因为这是fis配置文件,他是对文件进行预处理,怎么预处理就是从这个文件的配置来进行的。
fis release -d ./output
用来发布的 一个点是当前目录,也就是fis-config目录
如果你想对发布的时候有一些不一样比如debug模式的话
你如何配置文件?
fis.match(selector,props);
这个方法配置在fig-conf.js上。顺序也是很总的事情,那就是后面的配置会覆盖前面的配置。
fis.media() 提供多种状态的接口,比如debug模式
fis.media('debug').match('*.{js,css,png}', { useHash: false, useSprite: false, optimizer: null});
启用的时候就是
fis3 release debug -d dest
如何使用插件呢
// 清除其他配置,只保留如下配置
fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩,已内置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件进行压缩,已内置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', { // fis-optimizer-png-compressor 插件进行压缩,已内置
optimizer: fis.plugin('png-compressor')
});
默认情况下打包图片
li.list-1::before { background-image: url('./img/list-1.png?__sprite');}
li.list-2::before { background-image: url('./img/list-2.png?__sprite');}
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})// 对 CSS 进行图片合并
fis.match('*.css', { // 给匹配到的文件分配属性 `useSprite`
useSprite: true
});