如果你是前端工程师，那么你一定对切图这个环节不会感到陌生。按照传统的流程，我们需要将设计师提供的 PSD 或者 Sketch 文件打开，一个一个地选择需要切的图层，然后导出为图片。但是，这种流程效率低下，而且容易出现错误。而今天我们要介绍的就是一款 NPM 包 artboards-to-buffer，可以帮助我们实现切图流程的自动化。
artboards-to-buffer 的使用方法
artboards-to-buffer 是一款基于 Node.js 的 NPM 包，所以在使用之前，你需要先安装 Node.js，安装方法详见官网。安装完成之后，在你的项目目录下打开终端窗口，输入以下命令安装 artboards-to-buffer：
--- ------- -------------------
安装完成之后，我们就可以使用 artboards-to-buffer 进行自动化切图了。
第一步：配置 artboards-to-buffer
在使用 artboards-to-buffer 之前，我们需要先对其进行配置。首先在项目根目录下新建一个名为 artboards-to-buffer-config.json 的文件，并在其中添加以下配置信息：
- --------- ---------------------------- ------- ----------------- --------- ------ ---------- --- -
其中，source 表示源文件的路径，dest 表示生成文件的目标路径，format 表示生成文件的格式，目前 artboards-to-buffer 支持 png、jpg、jpeg 和 webp 四种格式，quality 表示生成文件的质量。如果你需要将所有的 artboard 都导出为图片，可以在配置文件中添加 "allArtboards": true。
第二步：使用 artboards-to-buffer
配置完成之后，我们就可以使用 artboards-to-buffer 进行自动化切图了。在终端窗口中输入以下命令：
--- -------------------
此时，artboards-to-buffer 会按照配置文件中的要求，将 PSD 文件中的 artboard 导出为图片，并保存到相应的目标路径下。
artboards-to-buffer 的示例代码
下面我们来看一个具体的示例，假设我们有一个 PSD 文件 example.psd，其中有两个 artboard 分别为 intro 和 body，我们需要将这两个 artboard 导出为 PNG 格式的图片，并保存到 dist 目录下。我们可以新建一个名为 artboards-to-buffer-config.json 的配置文件，其内容如下：
-
--------- --------------
------- -------
--------- ------
---------- ----
--------------- ------
------------ -
-------- -
---- ----
---- ----
-------- ----
--------- ----
----------- -------
--
------- -
---- ----
---- ----
-------- ----
--------- ----
----------- ------
-
-
-在配置文件中，我们通过 artboards 属性对每个 artboard 进行了详细的配置。其中，x、y、width 和 height 表示该 artboard 在 PSD 文件中的左上角坐标和宽高，filename 表示导出文件的文件名。
配置文件准备好之后，我们可以在终端窗口中输入以下命令进行导出：
--- -------------------
此时，artboards-to-buffer 就会按照我们的配置，将 example 文件中的 intro 和 body 两个 artboard 导出为 PNG 格式的图片，并保存到 dist 目录下，并且文件名分别为 intro.png 和 body.png。
总结
artboards-to-buffer 是一款非常实用的 NPM 包，可以帮助我们实现切图流程的自动化，提高开发效率，减少错误。在配置文件中，我们可以指定需要导出的 artboard，并对其进行详细的配置。同时，artboards-to-buffer 还支持多种图片格式和质量的设置，非常灵活和实用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e16a563576b7b1eca58