fis3——针对小项目

Posted 2020-07-11 简惬

支持功能：

内容嵌入（主要针对图片）、less、自动生成雪碧图、压缩css和js、自动刷新

安装fis3

npm install -g fis3
npm install -g fis-parser-less
npm install -g fis3-postpackager-loader

fis3 release -d D:/file/demo... //发布路径
fis3 server start
fis3 release -wL //开启自动刷新

fis-config.js

fis.match(‘*.{png,js,css}‘, {
	release: ‘/static/$0‘,
	useHash: true  //添加MD5戳，用于强刷缓存
});
fis.match(‘*.js‘, {
	optimizer: fis.plugin(‘uglify-js‘)
});
fis.match(‘*.png‘, {
	optimizer: fis.plugin(‘png-compressor‘)
});
fis.match(‘::package‘, {
	spriter: fis.plugin(‘csssprites‘)
});
fis.match(‘*.{css,less}‘,{
	optimizer: fis.plugin(‘clean-css‘)
});
fis.match(‘*.css‘, {
	useSprite: true
});
fis.match(‘*.{less,sass}‘, {	
  	parser: fis.plugin(‘less‘),   // fis-parser-less 插件进行解析	
  	rExt: ‘.css‘,  // .less 文件后缀构建后被改成 .css 文件
	isCssLike: true
});
fis.config.set(‘settings.spriter.csssprites‘, {
    htmlUseSprite: true,  //开启模板内联css处理,默认关闭
    styleReg: /(<style(?:(?=\s)[\s\S]*?["‘\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig, //默认<style></style>标签的匹配正则
    scale: 1,  //雪碧图缩放比例
    margin: 10,  //图之间的边距  
    layout: ‘matrix‘  //使用矩阵排列方式，默认为线性`linear`
});