利用fis3构建前端项目工程
[TOC]
FIS3是国内百度公司产出的一款前端工程构建工具，FIS3可以解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题，首先来简单的实现资源合并压缩提高性能等问题。
1.安装node.js和npm
打开官网 https://nodejs.org
Paste_Image.png
点击安装稳定版本，node新版已经集成npm。
查看是否安装node
node -v
查看是否安装
npm -v
如果有安装会显示具体版本号
比如:
Paste_Image.png
2.安装fix3
npm install -g fis3
安装成功：
Paste_Image.png
3.配置命令及作用
- 添加时间戳，解决缓存。
fis.match('*.{js,css,png}', {
useHash: true
});
- 启用 fis-spriter-csssprites 插件，给匹配到的文件分配属性 useSprite
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
fis.match('*.css', {
useSprite: true
});
FIS3 构建会对 CSS 中，路径带 ?__sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理，所有需要合并的图片路径需带?_sprite，如下：
.first_icon::before {
background: url("../img/first_icon.png?__sprite");
}
.second_icon::before {
background: url("../img/second_icon.png?__sprite");
}
- 图片压缩 fis-optimizer-png-compressor 插件进行压缩，已内置
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
- 对css压缩，fis-optimizer-clean-css 插件进行压缩，已内置
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
- 对js压缩，利用fis-optimizer-uglify-js 插件进行压缩，已内置
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
- 启用fis3-hook-relative插件，并让所有文件支持相对路径，如果使用绝对路径，可注释启用fis3-hook-relative插件。
fis.hook('relative');
fis.match('**', {
relative: true
});
- 对多个页面，散列文件进行合并，需安装 fis3-postpackager-loader
fis.match('::packager', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
- 指定构建存放路径
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
4.开始构建项目
(1)在项目目录里新建一个配置文件fis-conf.js
配置如下：
//启用fis3-hook-relative插件
fis.hook('relative');
//让所有文件，都使用相对路径
fis.match('**', {
relative: true
});
// 加md5戳
fis.match('*.{js,css,png}', {
useHash: true
});
//启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
});
//对CSS进行图片合并 给匹配到的文件分配属性 `useSprite`
fis.match('*.css', {
useSprite: true
});
//图片压缩 fis-optimizer-png-compressor 插件进行压缩，已内置
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
//js压缩 fis-optimizer-uglify-js 插件进行压缩，已内置
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
//css压缩 fis-optimizer-clean-css 插件进行压缩，已内置
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
//可对页面散列文件进行合并，需安装 fis3-postpackager-loader
fis.match('::packager', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
//配置文件指定路径位置
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
(2)开始构建
进入项目根目录，执行命令，进行构建。
构建发布到项目目录的dist目录下
fis3 release -d ./dist
构建发布到项目父级目录的dist子目录下
fis3 release -d ../dist
发布到其他盘（Windows）
fis3 release -d F:\dist
参考网址：
http://fis.baidu.com/