fis3——针对小项目

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