fis第一课

首先安装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
});