简介
gulp-plugin-fabric 是基于 Fabric.js 的一个 Gulp 插件，使用它可以非常方便地将 SVG 文件转化为 Canvas 并且生成相应的 PNG 和 SVG 文件。同时还能对转化后的 Canvas 图形进行缩放和压缩优化。
安装
首先需要安装 Gulp 和 Fabric.js，然后在项目目录下运行以下命令进行安装：
npm install gulp-plugin-fabric --save-dev
使用
安装完 gulp-plugin-fabric 后，就可以在 Gulp 任务中使用了。
转化 SVG 为 Canvas
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------------------------
----------------------- ---------- -
------ -----------------------
--------------
----- -------------
-------- -
------ -----
------- ----
------- ------
-------- ---
-
---
-----------------------------
---运行该任务后会将 ./svg/*.svg 下的所有 SVG 文件转化为 Canvas 并保存到 ./canvas/ 目录下。
缩放 Canvas
-- -------------------- ---- -------
-------------------------- ---------- -
------ --------------------------
--------------
----- ----------------
-------- -
------ ----
------- ----
------- ------
-------- ---
-
---
-----------------------------
---运行该任务后会将 ./canvas/*.png 下的所有 PNG 文件按照指定的宽高缩放并保存到 ./canvas/ 目录下。
压缩 Canvas
-- -------------------- ---- -------
------------------- ---------- -
------ --------------------------
--------------
----- ---------
-------- -
------ -
-
---
-----------------------------
---运行该任务后会将 ./canvas/*.png 下的所有 PNG 文件按照指定的压缩等级进行优化并保存到 ./canvas/ 目录下。优化等级范围为 0 到 7，越大优化效果越好但运行速度越慢。
总结
使用 gulp-plugin-fabric 可以非常便捷地对 SVG 文件进行转化和优化。相比于手动编写代码实现相同的效果，它可以大大减轻工作量并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de89c