前端打包工具之fis3的初级使用

时间:2022-12-14 15:12:31

说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单。于是乎,我转入了fis3阵营,发现fis3对于新手来说再合适不过了,fis3只用记住几条命令就可以解决日常需求。下面开始讲解:

1.fis3 release [-d 发布路径]

发布代码到fis3本地浏览器,括号中代表发布到哪个文件目录下,不带参数,默认发布到本地浏览器(可以使用第5条命令查看本地服务器路径,会自动打开文件夹)

2.fis3 server start [-p 端口号]

开启本地服务器,括号中代表设置端口号,如果发现端口号被占用。

3.fis3 server clean

清除fis3本地服务器代码

4.fis3 release -wL

热调试,可以实时预览代码改变后的效果,简单实用

5.fis3 server open

自动打开本地服务器目录

 更多命令,详情参考(fis3官方文档) http://fis.baidu.com/fis3/docs/beginning/intro.html

下面是我常用的配置,他可以编译es6,7语法为es5,编译预处理语言sass,less为css文件,自动添加css后缀(再也不用手动添加后缀了)压缩合并js,css代码,压缩png,自动将小图片icon转换为base64字符,自动为文件加上hash或者MD5,自动生成csssprite(精灵图或者叫做雪碧图),自动将相对路径转化为绝对路径,实时预览,一键部署发布等功能。(仅仅只有40行,实现了这么多功能,是不是觉得比webpack简单多了?还不赶紧用起来

// 加 md5
fis.match('*.{png,jpg,gif,js,less,css}', {
useHash:
true
});

// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin(
'csssprites')
});

// 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});

//支持 es6、es7 或者 jsx 编译成 es5
fis.set('project.fileType.text', 'js');
fis.match(
'*.js', {
parser: fis.plugin(
'babel-6.x'),
rExt:
'.js',
optimizer: fis.plugin(
'uglify-js')
});

fis.match(
'*.less', {
// fis-parser-less 插件进行解析
parser: fis.plugin('less'),
// .less 文件后缀构建后被改成 .css 文件
preprocessor : fis.plugin("autoprefixer",{
"browsers": ["last 10 versions"]
}),
rExt:
'.css',
optimizer: fis.plugin(
'clean-css')
});

fis.match(
'*.png', {
// fis-optimizer-png-compressor 插件进行压缩,已内置
optimizer: fis.plugin('png-compressor')
});