fis3和gulp都在用，fis3因為做了好多封裝，配置起來很簡單，只需要引入插件指向對應文件即可，更適合一些小demo；gulp配置相對麻煩一點，但是功能強大，更適合做架構，支持大的項目。本文是在已安裝node、npm的情況下進一步安裝fis3。
支持功能：
內容嵌入（主要針對圖片）、less、自動生成雪碧圖、壓縮css和js、自動刷新
安裝fis3，請注意mac用戶安裝時前面加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... //發布路徑 fis3 server start --www //自定義絕對路徑 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`
});