fis3
fis3
对于fis的总结好像丢了，再次借鉴官方文档摘抄和总结一些知识点，以供温习和记忆
项目根目录：fis3配置文件（默认fis-conf,js）所在的目录为项目根目录。
fis3 release -d ./output 构建发布到项目目录的output目录下
fis3 release -d ../dist 构建发布到项目父级目录的dist子目录下
对比发布之后和发布之前的引用路径，将相对路径替换成了绝对路径
fis3的构建过程对资源URL进行了替换，替换成了绝对URL，体现了fis一个重要特性：资源定位
接着在项目的根目录执行命令 fis3 release -d ../output发布到../output下，
在默认不配置的情况下只是对资源相对路径修改成了绝对路径，通过配置文件可以轻松分离开发录路径（源码路径）与部署路劲。不如我们想让所有的静态资源构建后到static目录下，在fis.conf.js里面进行配置：
fis.match(‘*.{png,js,css},{
release : ‘/static/$0’
}’)；
初始化的fis-conf.js如下本身就带有图片压缩的功能的配置
// default settings. fis3 release
// Global start
fis.match('*.{js,css}', {
useHash: true// 开启md5戳
});
fis.match('::image', {
useHash: true
});
//js压缩
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
//css压缩
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
//png图片压缩
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
// Global end
// default media is `dev`
fis.media('dev')
.match('*', {
useHash: false,
optimizer: null
});
// extends GLOBAL config
fis.media('production');
虽然有功能配置，单丝缺少相应的插件依旧不能执行，package.json中并没有安装相关的依赖包，压缩功能，添加md5戳还是无法实现。下面开始添加常用的插件：
安装方式都是 npm install —save-dev 插件名
1压缩js：fis-optimizer-uglify-js
2压缩css：fis-optimizer-clean-css
3压缩图片：fis-optimizer-png-compressor
4编译less: fis-parser-less-2.x
5编译scss: fis-parse-node-sass
6图片合并：fis-sriter-csssprites 除了配置此插件，还有一项重要的事，就是在需要合并的图片后面加上?__inline
7基于页面的打包：fis3-postpackager-loader
完整的fis-conf.js如下：
//加 md5
fis.match('*.{js,css,png,gif}', {
useHash: true // 开启 md5 戳
});
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('/css/*.css', {
useSprite: true
});
//定位资源，将内容发布到release 指向的目录
fis.match('/js/*.js',{
release:'/static$0'
});
fis.match('*.{css,less}',{
release:'/static$0'
});
fis.match('/images/(*.{png,gif,jpg})', {
//发布到/static/pic/xxx目录下
release: '/static/pic$0'
});
//压缩
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
fis.match('*.{png,gif,jpg}', {
optimizer: fis.plugin('png-compressor'),
release: '/static/pic$0'
});
// less编译
fis.match('*.less', {
rExt: '.css', // from .less to .css
parser: fis.plugin('less-2.x', {
// fis-parser-less-2.x option
}),
release:'/static$0'
});
//scss编译
fis.match('*.scss', {
release:'/static/css$0',
rExt: '.css',
parser: fis.plugin('node-sass', {
// options...
})
});
//基于页面的打包
fis.match('::package', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
//发布的时候忽略以下目录或文件
fis.set('project.ignore', [
'output/**',
'node_modules/**',
'.git/**',
'.svn/**',
'package.json'
]);
//设置默认发布的路径,适用于使用自己的服务器替代内置Server，一般没必要
//fis3-deploy-local-deliver
// fis.match('*', {
// deploy: fis.plugin('local-deliver', {
// to: '/Users/lee/Desktop/output'
// })
// })
// default media is `dev`
fis.media('dev')
.match('*', {
useHash: false,
optimizer: null
});
// extends GLOBAL config
fis.media('prod');
