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

  

  

 

  

  

posted @ 2016-05-23 18:46  简惬  阅读(2108)  评论(0编辑  收藏  举报