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' });
2024还活着,挺好的,向着星辰与深渊,加油,博客园不要倒下啊!