在前端开发中，我们经常需要使用构建工具来优化、打包、压缩 JavaScript、CSS 等资源，而 fis3 是一个非常好的前端构建工具。其中，fis3-command-r 是一个用于压缩图片资源的插件，本文将详细介绍它的使用教程。
安装
首先，你需要全局安装 fis3：
npm install -g fis3
然后，安装 fis3-command-r：
npm install -g fis3-command-r
安装完毕后，你就可以使用 fis3 中的 r 命令了。
使用方法
压缩图片
如果你想要压缩某个目录下的所有图片，可以使用以下命令：
fis3 release --optimize --dest=./output --verbose
其中，optimize 参数表示启用优化插件，dest 参数表示输出目录，verbose 参数表示输出详细信息。
自定义配置
fis3-command-r 支持用户自定义压缩配置。在 fis-conf.js 中添加如下代码：
fis.config.set('settings.optimize.imagemin', {
optimizationLevel: 3,
progressive: true,
interlaced: true,
pngquant: {
quality: '65-80'
}
});其中，optimizationLevel、progressive、interlaced 和 pngquant 等都是图片压缩相关的配置项。
指定压缩范围
如果你只想压缩某些图片，可以使用以下代码进行指定：
-- -------------------- ---- -------
----------------------- -
---------- ---------------------- -
------------------ --
------------ -----
----------- -----
--------- -
-------- -------
-
--
---其中，img/**.png 表示选择所有 img 目录下的 png 图片，optimizer 表示使用哪个优化插件。
示例代码
以下是一个完整的 fis-conf.js 示例代码：
-- -------------------- ---- -------
-------------------------------------------- -
------------------ --
------------ -----
----------- -----
--------- -
-------- -------
-
---
----------------------- -
---------- ---------------------- -
------------------ --
------------ -----
----------- -----
--------- -
-------- -------
-
--
---
-------------- -
-------- ----
---
------------------ -
---------- -----------------------
---
----------------- -
---------- -----------------------
---
-----------------
------------------------ -
-------- -----
------- -------------------------
---上述配置将优化并压缩所有 png 图片，并对 CSS、JS 等文件进行压缩和 Hash 处理，同时指定 CDN 域名。
总结
fis3-command-r 是一个非常实用的前端构建工具，可以帮助我们优化、压缩图片资源。本文介绍了它的安装、使用方法以及自定义配置等内容，并提供了示例代码。希望能够对大家提供帮助，让前端开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0c6