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