首先安裝fis

 npm install -g fis3

例子

在正式介紹 FIS3 功能之前，我們給定一個(gè)簡(jiǎn)單的例子，例子下載地址 demo-simple

命令

進(jìn)入項(xiàng)目根目錄，執(zhí)行命令，進(jìn)行構(gòu)建。
一般是在fis-conf.js下進(jìn)行，為什么要在這個(gè)文件下進(jìn)行了，因?yàn)檫@是fis配置文件，他是對(duì)文件進(jìn)行預(yù)處理，怎么預(yù)處理就是從這個(gè)文件的配置來進(jìn)行的。

fis release -d ./output

用來發(fā)布的 一個(gè)點(diǎn)是當(dāng)前目錄，也就是fis-config目錄

如果你想對(duì)發(fā)布的時(shí)候有一些不一樣比如debug模式的話

你如何配置文件？

fis.match(selector,props);

這個(gè)方法配置在fig-conf.js上。順序也是很總的事情，那就是后面的配置會(huì)覆蓋前面的配置。

fis.media() 提供多種狀態(tài)的接口，比如debug模式

fis.media('debug').match('*.{js,css,png}', { useHash: false, useSprite: false, optimizer: null});

啟用的時(shí)候就是

fis3 release debug -d dest

如何使用插件呢

// 清除其他配置，只保留如下配置
fis.match('*.js', { // fis-optimizer-uglify-js 插件進(jìn)行壓縮，已內(nèi)置 
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件進(jìn)行壓縮，已內(nèi)置 
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', { // fis-optimizer-png-compressor 插件進(jìn)行壓縮，已內(nèi)置
  optimizer: fis.plugin('png-compressor')
});

默認(rèn)情況下打包圖片

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')
})// 對(duì) CSS 進(jìn)行圖片合并

fis.match('*.css', { // 給匹配到的文件分配屬性 `useSprite`
  useSprite: true
});