npm 包 gulp-remove-svg-tag 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 SVG 可以让我们更轻松地创建矢量图形，但是 SVG 标签内部可能包含一些我们不需要的属性或者样式，这将影响我们的页面性能。gulp-remove-svg-tag 这个 npm 包，可以帮助我们删除 SVG 内部的标签、属性以及样式，提高网站的性能。

gulp-remove-svg-tag 介绍

gulp-remove-svg-tag 是一个可在 Gulp 中使用的 npm 包，用于删除 SVG 内部的标签、属性以及样式。这个包使用了 Cheerio，是一个基于 jQuery 的 Node.js 包，用于在服务器上操作 DOM，可以让我们更轻松地对 SVG 进行修改。

安装 gulp-remove-svg-tag 包

打开终端，运行以下命令来安装 gulp-remove-svg-tag：

npm install gulp-remove-svg-tag --save-dev

安装后，我们需要在 Gulpfile.js 中引入这个包。

const gulp = require('gulp');
const svgmin = require('gulp-svgmin');
const removeSvgTag = require('gulp-remove-svg-tag');

使用 gulp-remove-svg-tag 包

在 Gulpfile.js 中，我们可以使用以下代码来使用 gulp-remove-svg-tag：

gulp.task('removeSvgTag', function(){
  return gulp.src('./svg/*.svg')
    .pipe(svgmin())
    .pipe(removeSvgTag())
    .pipe(gulp.dest('./dist'));
});

在这段代码中，我们首先使用 Gulp 来读取源 SVG 图像文件，然后通过管道（pipe）传递给 svgmin()，这个步骤可以删除 SVG 中的空格和注释，从而缩小 SVG 文件的大小。接下来，我们又使用管道传递给 removeSvgTag()，这个插件可以删除 SVG 中的标签、属性和样式，只保留必要的部分。最后，我们将处理后的 SVG 文件传递给了 gulp.dest()，将其输出到指定位置。

gulp-remove-svg-tag 的参数

gulp-remove-svg-tag 提供了几个选项，可以帮助我们更精细地控制 SVG 文件的输出。这些选项包括：

tagsToRemove：要删除的 SVG 标签，可以是字符串或者数组，例如：['title', 'desc']；
attrsToRemove：要删除的 SVG 属性，可以是字符串或者数组，例如：['id', 'class']；
stylesToRemove：要删除的 CSS 样式，可以是字符串或者数组，例如：['fill', 'stroke']。

以下是一个带参数的 gulp-remove-svg-tag 使用示例：

-- -------------------- ---- -------
------------------------- -----------
  ------ -----------------------
    ---------------
    --------------------
      ------------- --------- --------
      -------------- ------ ---------
      --------------- -------- ---------
    ---
    ---------------------------
---

使用这些参数，我们可以更精细地控制删除操作，减小 SVG 文件大小和优化性能。

开始使用 gulp-remove-svg-tag

在这篇文章中，我们介绍了一个非常实用的 npm 包 gulp-remove-svg-tag，可以让我们更方便地删除 SVG 内部无用的标签、属性和样式，提高网站的性能。我们学习了这个包的安装、使用以及一些参数的选项。希望这篇文章能够帮助你更好地了解这个工具，提高前端开发的效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005664781e8991b448e25dd