FIS3是国内百度公司产出的一款前端工程构建工具，FIS3可以解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题，首先来简单的实现资源合并压缩提高性能等问题。
安装fix3
npm install -g fis3
创建项目目录
cd 进入此目录中初始化，执行
fis3 init
对需要的插件进行安装 ，比如安装scss编译插件：
npm install -g --save-dev fis-parser-node-sass
注意：如果 fis-parser-node-sass 安装失败，请卸载nodejs，安装低版本即可
让 fis3 产出能够支持相对路径。
npm install -g fis3-hook-relative
常用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html
配置文件
打开fis-conf.js 做相应的配置
// 保持发布使用相对路径
fis.hook('relative');
fis.set('domain_test', '');
// 预发布环境
fis.set('domain_pre', 'http://test.zuobaiquan.com');
// 线上环境
fis.set('domain_build', 'http://zuobaiquan.com');
// 定义版本号
fis.set('version', '1.0.0'); fis.set('project.files', [
"tpl/**/*.html"
]); fis.set('project.files', [
'*.css',
'js/**',
'images/**',
'*.html'
]); fis.match("*", {
relative: true
}) //添加时间戳，解决缓存。
.match('*.{js,css,png}', {
useHash: true
})
.match('::package', {
spriter: fis.plugin('csssprites', {
htmlUseSprite: true,
styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig,
margin: 5
})
})
.match('/css/*.scss', {
rExt: '.css',
parser: fis.plugin('node-sass', {
// options...
})
})
.match('css/*.{css,scss}', {
preprocessor: fis.plugin('autoprefixer', {
"browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
"cascade": true
})
})
.match('/css/*.{scss,css}', {
useSprite: true,
optimizer: fis.plugin('clean-css')
})
.match('/js/*.js', {
parser: fis.plugin('babel-5.x'),
// fis-optimizer-uglify-js 插件进行压缩，已内置
optimizer: fis.plugin('uglify-js')
})
.match('images/*.png', {
optimizer: fis.plugin('png-compressor', {
type: 'pngquant'
})
})
.match('/css/(*.{png,gif})', {
release: '/images/sprite/$1$2'
}); // fis.media('production').match('/js/*.js', {
// parser: fis.plugin('jdists', {
// remove: "debug"
// })
// }) fis.media('test')
.match("*", {
domain: "${domain_test}",
}); fis.media('pre')
.match("*", {
domain: "${domain_pre}",
}); fis.media('build')
.match('*', {
domain: "${domain_build}"
})
如果打包build 不需要某些文件夹，可配置：
fis.match('/tpl/*', {
// 设置 release 为 false，不再产出此文件
release: false
})开发阶段命令： fis3 server stop && fis3 server clean && fis3 server start -p && fis3 release test --verbose -wLc
预发布： fis3 release pre --verbose -cd ./pre
发布阶段：fis3 release build --verbose -cd ./dist
fis3 server stop //终止服务
fis3 server clean //清除服务目录下的文件
fis3 server start -p 1111 //启动服务，端口号是1111 （不加-p 1111的话默认端口号是8080）
fis3 release test –verbose -wLc //调试模式 不会关闭cmd
项目目录结构
建议安装 fis-parser-babel-5.x 插件，这样就支持 es6、es7 或者 jsx 编译成 es5 啦，是不是很溜！
npm install -g --save-dev fis-parser-babel-.x
fis-conf.js配置：
fis.match('*.js', {
parser: fis.plugin('babel-5.x')
})源码地址：https://github.com/zuobaiquan/framework/tree/master/基于fis3前端工具构建的静态页面框架