npm 包 @mariusgundersen/gulp-svg-spritesheet 使用教程

简介

在 Web 开发中，我们经常需要使用 SVG 图片。但是，网站中过多的 SVG 图片会导致加载速度变慢，因此我们需要使用 SVG 精灵图，通过将多个 SVG 图片打包成一个文件，以此来提高加载速度。

为了实现 SVG 精灵图的制作，我们可以使用 npm 包 @mariusgundersen/gulp-svg-spritesheet。这个包可以将我们指定的多个 SVG 文件打包成一个 SVG 精灵图，并且提供了各种定制化选项。

安装

在使用 @mariusgundersen/gulp-svg-spritesheet 之前，我们需要先安装 gulp，如果你还没有安装 gulp，请先使用以下命令进行安装：

npm install gulp-cli -g

接着，我们可以使用以下命令安装 @mariusgundersen/gulp-svg-spritesheet：

npm install @mariusgundersen/gulp-svg-spritesheet --save-dev

使用方法

在安装完成之后，我们需要在 gulpfile.js 中引入 @mariusgundersen/gulp-svg-spritesheet：

const svgSprites = require('@mariusgundersen/gulp-svg-spritesheet');

接着，我们可以使用以下代码将多个 SVG 文件打包成一个 SVG 精灵图：

gulp.task('svg-sprites', function() {
    return gulp.src('path/to/svg/files/*.svg')
        .pipe(svgSprites())
        .pipe(gulp.dest('path/to/output/folder'));
});

在上面的代码中，我们先选择了多个 SVG 文件，然后使用 svgSprites() 方法将这些文件打包成了一个 SVG 精灵图。最后，我们将这个精灵图保存到了指定的输出文件夹中。

配置选项

除了默认选项之外，@mariusgundersen/gulp-svg-spritesheet 还提供了各种定制化选项，可以帮助我们更好地制作 SVG 精灵图。下面是一些常用的选项：

mode

mode 选项用于设置精灵图的布局模式，可以是vertical、horizontal、diagonal 或 packed。默认值为vertical。

gulp.task('svg-sprites', function() {
    return gulp.src('path/to/svg/files/*.svg')
        .pipe(svgSprites({ mode: 'horizontal' }))
        .pipe(gulp.dest('path/to/output/folder'));
});

padding

padding 选项用于设置每个 SVG 图片之间的间隔。默认值为 2。

gulp.task('svg-sprites', function() {
    return gulp.src('path/to/svg/files/*.svg')
        .pipe(svgSprites({ padding: 10 }))
        .pipe(gulp.dest('path/to/output/folder'));
});

baseSize

baseSize 选项用于设置精灵图的宽度和高度。默认值为 16。

gulp.task('svg-sprites', function() {
    return gulp.src('path/to/svg/files/*.svg')
        .pipe(svgSprites({ baseSize: 32 }))
        .pipe(gulp.dest('path/to/output/folder'));
});

unit

unit 选项用于设置精灵图中每个 SVG 图片的单位。通常为 px 或者 em。默认值为 px。

gulp.task('svg-sprites', function() {
    return gulp.src('path/to/svg/files/*.svg')
        .pipe(svgSprites({ unit: 'em' }))
        .pipe(gulp.dest('path/to/output/folder'));
});

示例代码

下面是一个完整的示例代码，包括了常用的配置选项：

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

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

总结

通过使用 @mariusgundersen/gulp-svg-spritesheet，我们可以方便地将多个 SVG 文件打包成一个 SVG 精灵图，并且可以根据需要进行各种定制化选项。希望本文可以帮助你更好地进行前端开发。

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