前言
在前端开发中，我们通常需要将设计师提供的 Sketch 文件转换成 Web 页面。手动切图虽然可以完成这项工作，但效率较低且容易出错，所以我们可以使用一些自动化工具来简化这个过程。其中，gulp-sketch 是一款能够将 Sketch 文件转换成 PNG、SVG 或 WebP 等格式的 Gulp 插件，使用起来十分方便。
安装
首先需要在本地安装 Gulp 和 gulp-sketch，可使用以下命令：
npm install gulp gulp-sketch --save-dev
使用
导出 PNG
在 gulpfile.js 中，我们可以这样配置任务来将 Sketch 文件导出成 PNG 格式：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
----------------------- -----------
------ --------------------------------------
--------------
------- ---------
-------- -----
---
-------------------------------------------
---上述代码中，gulp.task() 确定了任务名为 export-png。gulp.src() 指定了需要处理的 Sketch 文件，gulp.dest() 指定了导出的 PNG 文件夹位置。.pipe() 中的 sketch() 是用来进行转换的核心方法，其中参数 export 表示导出类型，此处为 slices（即将设计师在 Sketch 中制作的切片导出）；formats 表示输出格式，此处为 png。
导出 SVG
类似地，我们可以利用 gulp-sketch 将 Sketch 文件导出成 SVG 格式：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
----------------------- -----------
------ --------------------------------------
--------------
------- ------------
-------- -----
---
-------------------------------------------
---上述代码中，export 参数为 artboards，表示导出素材的类型为 Artboards，即根据画板导出。.pipe() 中的 formats 参数为 svg，表示导出 SVG 格式的文件。
使用 retina2x
如果导出的素材需要支持高清（Retina），则需要添加参数 retina2x: true，具体的代码如下：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
------------------------------ -----------
------ --------------------------------------
--------------
------- ---------
-------- ------
--------- ----
---
-------------------------------------------
---结语
通过 gulp-sketch 这一自动化插件，我们可以高效便捷地将 Sketch 文件转换成 Web 页面上展示的素材。相比手动切图，这种自动化工具不仅节省了时间，还可以减少出错的可能性。希望这篇文章可以帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66151