#npm 包 grunt-extract-sketch-svgs 使用教程
随着前端技术的不断发展，SASS、React等已经成为了前端开发中必不可少的技术。而随着Sketch的流行，他也渐渐的成为了UI设计师不可或缺的工具。但是，Sketch中的图标使用在前段开发过程中却是一个比较麻烦的事情，因为需要将图标手动导出到SVG文件中。那么，有没有一种方式可以简化这个流程呢？这时，就需要使用到npm包grunt-extract-sketch-svgs。
##grunt-extract-sketch-svgs概述
grunt-extract-sketch-svgs是一个支持Sketch的npm包，通过它可以轻松将Sketch中的图标导出为SVG文件，同时也支持生成不同尺寸的SVG文件。
安装grunt-extract-sketch-svgs
在使用之前，需要先安装grunt-extract-sketch-svgs。可以使用npm命令进行安装：
npm install grunt-extract-sketch-svgs --save-dev
如何使用grunt-extract-sketch-svgs
配置Gruntfile.js
在Gruntfile.js中配置grunt-extract-sketch-svgs的任务：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-------------------- -
-------- -
----------- ----------------------------- -- ---- -- ---- ------ ----
---------- ------------------------ -- ---- -- --- ------ ---------
---------- ----- -- --- -- ----- -- --- ---- -- ---- --- ------------
------------- -- -- ------ -- ------- ------ -- -------- --- -----------
---------- -------- -- ----- -- ----------
------ -
-
------ ---
------- ---
------- --
--
-
------ ---
------- ---
------- -----
--
-
------ ---
------- ---
------- -----
-
- -- -- ----- -- ------- -------- ------ -----
-
-
---
------------------------------------------------
--在代码中，我们定义了extract_sketch_svgs任务，并配置该任务的相关参数，包括sketchFile（Sketch文件所在路径）、outputDir（生成的SVG文件所在目录）、svgSizing（SVG文件尺寸类型）、sizes（输出SVG文件的不同尺寸）等。
运行grunt任务
在配置好Gruntfile.js之后，我们就可以运行生成SVG文件的grunt任务了：
grunt extract_sketch_svgs
此时，grunt会读取Gruntfile.js中extract_sketch_svgs任务的配置，然后执行对应的操作。在执行完毕之后，会在outputDir目录下生成相应的SVG文件。
其他使用注意事项
导入外部内置字体
在使用时，如果需要SVG文件中使用到Sketch文件中使用的字体，需要将字体导出为.otf或.ttf格式，然后在CSS中引入：
@font-face {
font-family: "Font Name";
src: url("path/to/font/font.otf") format('opentype');
}避免生成冗余的SVG代码
grunt-extract-sketch-svgs会在生成SVG文件时添加一些冗余代码，我们可以使用gulp的gulp-replace插件进行正则表达式替换：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - ------------------------
------------------------- ---------- -
------ ---------------------------------------
--------------- -------------- ----
--------------- ----------------- ----
--------------- ----------------- ----
--------------- ----------------- ----
--------------- ----------------------- ----
------------------------------------------
---自定义输出SVG文件名
在grunt-extract-sketch-svgs生成SVG文件时，输出的文件名遵循以下格式：
{symbolid}[suffix].svg其中，{symbolid}为Sketch文件中矢量图层的名称，[suffix]为定义的尺寸后缀。如果需要自定义输出的SVG文件名，可以通过自定义Gruntfile.js中extract_sketch_svgs任务中的命名函数来实现：
namingFn: function (filePath, size) {
var name = path.basename(filePath, path.extname(filePath));
return name + '-' + size.width + 'x' + size.height + '.svg';
}以上就是使用grunt-extract-sketch-svgs的相关操作方法。通过使用该npm包，我们能够大大简化从Sketch到前端开发的流程，提高开发效率，推动前端技术的发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579181e8991b448d48f9