fis3因?yàn)樽隽撕枚喾庋b,配置起來(lái)很簡(jiǎn)單廷雅,只需要引入插件指向?qū)?yīng)文件即可耗美,更適合一些小demo;本文是在已安裝node航缀、npm的情況下進(jìn)一步安裝fis3商架。
支持功能:
1、內(nèi)容嵌入(主要針對(duì)圖片)芥玉、less蛇摸、自動(dòng)生成雪碧圖、壓縮css和js灿巧、自動(dòng)刷新
安裝fis3赶袄,請(qǐng)注意mac用戶安裝時(shí)前面加sudo,即sudo npm install -g fis3
npm install -g fis3
npm install -g fis-parser-less
npm install -g fis3-postpackager-loader
fis3 release -d D:/file/demo... //發(fā)布路徑
fis3 server start --www //自定義絕對(duì)路徑
fis3 release -wL //開啟自動(dòng)刷新
fis-conf.js
fis.match('*.{png,js,css}', {
release:'/static/$0',
useHash:true//添加MD5戳抠藕,用于強(qiáng)刷緩存
});
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 插件進(jìn)行解析
rExt:'.css',// .less 文件后綴構(gòu)建后被改成 .css 文件
isCssLike:true
});
fis.config.set('settings.spriter.csssprites', {
htmlUseSprite:true,//開啟模板內(nèi)聯(lián)css處理,默認(rèn)關(guān)閉
styleReg: /(|>))([\s\S]*?)(<\/style\s*>|$)/ig,//默認(rèn)標(biāo)簽的匹配正則
scale: 1,//雪碧圖縮放比例
margin: 10,//圖之間的邊距
layout:'matrix'//使用矩陣排列方式饿肺,默認(rèn)為線性`linear`
});