fis3—小项目架构

fis3因为做了好多封装，配置起来很简单，只需要引入插件指向对应文件即可，更适合一些小demo；本文是在已安装node、npm的情况下进一步安装fis3。

支持功能：

1、内容嵌入（主要针对图片）、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-conf.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: /(|>))([\s\S]*?)(<\/style\s*>|$)/ig,//默认标签的匹配正则

scale: 1,//雪碧图缩放比例

margin: 10,//图之间的边距

layout:'matrix'//使用矩阵排列方式，默认为线性`linear`

});