前端打包工具之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')
});

 

标签：

相关文章