如何在gulp-svg-sprite构建流程中排除指定SVG文件？

作为刚接触gulp的新手，你遇到的这个需求其实很常见——有些SVG需要保留原始结构（比如多路径用于独立样式），不能被SVGO的优化逻辑改动。下面给你两种简单易懂的实现方案，选一种适合你的就行：

方案1：按文件路径/命名区分，分流转后合并 #

这种方法思路清晰，适合新手理解：把需要保留原始结构的SVG单独放在一个文件夹（比如src/icons/unoptimized/），或者给它们加统一前缀（比如no-optim-*.svg），然后分别处理两组文件，最后合并生成精灵图。

步骤和代码示例 #

首先确保你安装了必要的插件：

npm install gulp gulp-svg-sprite gulp-svgo merge-stream --save-dev

然后修改你的gulp任务：

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
const svgo = require('gulp-svgo');
const merge = require('merge-stream');

// 配置SVG精灵图的基础参数（关闭自带的SVGO，我们自己手动控制）
const spriteConfig = {
  mode: {
    symbol: { // symbol模式是目前最推荐的内联SVG方案
      dest: '.',
      sprite: 'icons-sprite.svg'
    }
  },
  svg: {
    svgo: false
  }
};

gulp.task('build-svg-sprite', function() {
  // 1. 处理需要优化的图标：排除unoptimized文件夹里的文件，经过SVGO优化
  const optimizedIcons = gulp.src('src/icons/**/*.svg', { ignore: 'src/icons/unoptimized/**/*.svg' })
    .pipe(svgo({
      // 这里写你需要的SVGO优化规则，比如保留viewBox、清理无用ID等
      plugins: [
        { removeViewBox: false },
        { cleanupIDs: true },
        { removeEmptyAttrs: true }
      ]
    }));

  // 2. 处理不需要优化的图标：直接读取，跳过SVGO
  const unoptimizedIcons = gulp.src('src/icons/unoptimized/**/*.svg');

  // 3. 合并两个流，生成最终的精灵图
  return merge(optimizedIcons, unoptimizedIcons)
    .pipe(svgSprite(spriteConfig))
    .pipe(gulp.dest('dist/icons'));
});

方案2：用gulp-if判断文件，精准控制是否优化 #

如果不想单独放文件夹，也可以用gulp-if插件，根据文件名或者路径来判断哪些文件需要跳过优化，灵活性更高。

步骤和代码示例 #

先安装额外需要的插件：

npm install gulp-if --save-dev

然后编写任务：

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
const svgo = require('gulp-svgo');
const gulpIf = require('gulp-if');

// 自定义判断规则：比如文件名包含"no-optim"或者路径在unoptimized文件夹的，不优化
function shouldOptimize(file) {
  return !file.path.includes('no-optim') && !file.path.includes('unoptimized');
}

const spriteConfig = {
  mode: {
    symbol: {
      dest: '.',
      sprite: 'icons-sprite.svg'
    }
  },
  svg: {
    svgo: false
  }
};

gulp.task('build-svg-sprite', function() {
  return gulp.src('src/icons/**/*.svg')
    // 只对符合条件的文件应用SVGO优化
    .pipe(gulpIf(shouldOptimize, svgo({
      plugins: [
        { removeViewBox: false },
        { cleanupIDs: true }
      ]
    })))
    .pipe(svgSprite(spriteConfig))
    .pipe(gulp.dest('dist/icons'));
});

关键注意点 #

• 一定要关闭gulp-svg-sprite自带的SVGO（设置svg.svgo: false），否则不管你怎么处理，插件都会默认优化所有文件。
• 你的特殊SVG要确保两条路径有独立的标识（比如class或者id），这样后续才能分别设置样式，比如：

<svg viewBox="0 0 24 24">
  <path class="path-primary" d="..." />
  <path class="path-secondary" d="..." />
</svg>

内容的提问来源于stack exchange，提问作者Ryan Belisle