作为前端开发,或多或少都会接触很多前端构建工具,最近的业务使用到了百度 FIS 团队的 fis3,想和大家分享下我所理解的 fis3。
使用方法简单说
首先,你需要安装 node 和 npm
然后,使用 npm install -g fis3 命令安装 fis3,安装完成是这样的
然后我们可以通过 fis3 release -w 来对代码进行监听。
注:fis3 默认内置了 fis3-command-release 插件,提供了文件监听和浏览器自动刷新功能,在 release 的时候添加-w 或-L 参数就可以,这样可以很方便的部署代码。
当你需要使用插件的时候,可以用 fis3 install -g 插件名 进行安装。
与其他构件工具一样,fis3 也需要配置 fis-conf.js 文件。
添加 MD5 戳以及资源的合并压缩(配置useHash: true即可添加 MD5 戳)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
fis.media('offpack') .match('**.{js,tpl}', { optimizer: fis.plugin('uglify-js'), useHash: true }) .match('**.{css,scss,sass}', { optimizer: fis.plugin('clean-css'), useHash: true }) .match('**.png', { optimizer: fis.plugin('png-compressor') }) }); |
CssSprite 图片合并
1 2 3 4 5 6 |
.match('::package', { spriter: fis.plugin('csssprites') }) .match('*.css', { useSprite: true }) |
对 sass 文件进行编译
1 2 3 4 5 6 |
.match('**.{scss,sass}', { parser: fis.plugin('sass', { include_paths: ['modules/common/sass'] }), rExt: '.css' }) |
这样我们就可以使用基本的 fis3 了。
fis 三种编译能力
fis3 可以做到以下几点: