Awesome
FIS3
FIS3 面向前端的工程构建系统。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。
如果对FIS先有些了解,但理解不深的,可试着带着这句话去看文档 <br> FIS3 会在配置文件中给文件添加相应属性,用于控制文件的编译、合并等各种操作;文件属性包括基本属性和插件属性,详细请参考
npm install -g fis3
如果 Node 版本低于 4.x 请安装旧版本
npm install -g fis3@3.4.36
文档
快速入门、配置、插件开发以及原理等文档 doc/docs/INDEX.md
例子
mkdir my-proj
cd my-proj
fis3 init
fis3 release
fis3 server start --type node
fis-conf.js 的例子
// default settings. fis3 release
// Global start
fis.match('*.{js,css}', {
useHash: true
});
fis.match('::image', {
useHash: true
});
fis.match('*.js', {
optimizer: fis.plugin('uglify-js') // js 压缩
});
fis.match('*.css', {
optimizer: fis.plugin('clean-css') // css 压缩
});
fis.match('*.png', {
optimizer: fis.plugin('png-compressor') // png 图片压缩
});
// Global end
// default media is `dev`
fis.media('dev')
.match('*', {
useHash: false,
optimizer: null
});
// extends GLOBAL config
fis.media('production');
其他例子
https://github.com/fex-team/fis3-demo
常用插件
优化类(插件属性:optimizer)
- fis-optimizer-uglify-js UglifyJS2 压缩插件
- fis-optimizer-clean-css CleanCss 压缩插件
- fis-optimizer-png-compressor PNG 压缩插件
预处理类(插件属性:parser)
- fis-parser-less less 解析插件
- fis-parser-node-sass sass / scss 解析插件
- fis-parser-handlebars handlebars 解析插件