FIS3配置fis-conf.js

設置規則的配置接口：

fis.match(selector, props);

 

1.添加md5戳：對 js、css、png 圖片引用 URL 添加 md5 戳：

fis.match('*.{js,css,png}', {
  useHash: true
});

 

2.js壓縮：使用fis-optimizer-uglify-js 插件，已內置

fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

 

3.CSS壓縮：使用fis-optimizer-clean-css 插件，已內置

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

 

合併：

//合併打包需加
fis.match('::package', {
  postpackager: fis.plugin('loader')
});

//css打包配置
fis.match('*.css', {
  packTo: '/static/aio.css'
});

//js打包配置
fis.match('*.js', {
  packTo: '/static/aio.js'
});

 less的打包：

//less轉換爲css
fis.match('*.less', {
  parser: fis.plugin('less'),
  rExt: '.css'
});

//將less轉換出來的css與其餘css合併
fis.match('*.{less,css}', {
  packTo: '/static/aio.css'
});

 

圖片合併

對 CSS 中，路徑帶 ?__sprite 的圖片進行合併，如：

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

 

 

定位資源：

定位JS：全部的 js   發佈到/static/js/xxx目錄下

fis.match('**.js', {
    release : '/static/js$0'
});

定位CSS：全部的 css 發佈到/static/css/xxx目錄下

fis.match('**.css', {
    release : '/static/css$0'
});

定位圖片：全部image目錄下的.png，.gif文件發佈到/static/pic/xxx目錄下

fis.match('/img/(*.{png,gif})', {
    release: '/static/pic/$1$2'
});