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