修改 gulp-svg-sprite 的目标和文件名

Question

我需要更改精灵文件编译到的目录。

我只是第一次尝试绕过gulp-svg-sprite。目标是将scss 文件包含在我的sass 目录中，然后与我的其余部分一起编译——这部分工作正常。但是生成的svg目录也放到sass目录下，所以我最终得到：

- theme
-- sass
---- _sprites.scss
---- svg
------ sprite.css-58jkdf8js.svg
-- css
---- styles.css

当我真正需要这个时：

- theme
-- sass
---- _sprites.scss    
-- css
---- styles.css
---- svg
------ sprite.css-58jkdf8js.svg

当然，编译样式表有background: url(svg/sprite.css-58adlksjf.svg);

如何让 sprite 目录在 /css 而不是 /sass 下编译？

这是gulpfile.js的相关部分：

gulp.task('svg', function() {

  config                  = {
    mode                : {
        css             : {     // Activate the «css» mode
            render      : {
              scss      : true  // Activate CSS output (with default options)
            },
            dest        : './',            
            cssFile     : "_sprite.scss"
        },
        symbol          : {
            dest        : '../css/'
        }
    }
};

  gulp.src('src/svg/*.svg')
    .pipe(svgSprite(config))
    .pipe(gulp.dest('sass'));
})

我只在symbol 模式下添加，因为我希望我可以在那里制作另一个副本，但它只是将其存储为sprite.symbol.svg，这不是 CSS 所引用的。

我在想另一种方法是忘记 sass 的 svg 内容，将其编译为 /css，然后包含另一个样式表。但是，这意味着我必须将它包含在 主样式表之前（现在看起来还可以，但我还没有考虑到那部分）。

谢谢！

Answer 1

我知道可能为时已晚，但我的解决方案是这样的：

gulp.task('svg', function() {
    var config = {
        dest : '.',
        mode : {
             css : {
                 dest : '.',
                 sprite : 'css/svg/sprite.svg',
                 render : {
                     css : {dest : 'css/sprite.css'},
                     scss : {
                         dest : './sass/_sprite.scss'
                     }
                 },
             }
         }
     };
 gulp.src('src/svg/*.svg')
     .pipe(svgSprite(config))
     .pipe(gulp.dest('.'));
})

我更喜欢指定

  config.dest : '.'

就算是默认，也要离开

gulp.dest('.')

并从配置中处理文件夹。

Answer 2

对于您的问题可能为时已晚，但与此同时，svg-sprite 文档中有一个关于output destinations 的额外部分（因为它绝对不是微不足道的）。需要了解的重要一点是，几个 dest 选项相对于彼此起作用（只要您不使用绝对路径）。

• config.dest 指定一个主输出目录，用作所有输出模式的基础。
• config.<mode>.dest 与 config.dest 相关，用作当前模式的主要输出目标。
• config.<mode>.render.<format>.dest（如果给定）再次与config.<mode>.dest 相关，并用作指定<type> 文件的输出路径和文件名。默认为"sprite.<format>"。
• config.<mode>.sprite 指定精灵相对于config.<mode>.dest 的名称和位置。

所以默认情况下，"css" 和 "view" 这两种 CSS 精灵模式会将它们的样式表渲染为

config.dest + config.<mode>.dest + "sprite.<format>"

而 SVG 精灵本身将在以下位置创建

config.dest + config.<mode>.dest + config.<mode>.sprite

用于从样式表中引用精灵的相对路径将自动从这两个位置派生。

现在，当您使用 Sass 输出格式时，您会引入 svg-sprite 无法控制的编译步骤。 svg-sprite 唯一知道的是，您的最终编译的 CSS 应该位于 config.dest + config.<mode>.dest + "sprite.<format>"（或者特别是您为 config.<mode>.render.css.dest 配置的任何内容）。你只需要确保你的 Sass 编译结果真的能到达那里，你就会万事俱备。

---

说了这么多，在你的特殊情况下，你的配置应该是这样的（在我的脑海中）：

var config                  = {
    "dest"                  : "theme",
    "mode"                  : {
        "css"               : {
            "render"        : {
                "scss"      : {
                    "dest"  : "../sass/_sprites.scss"
                }
            }
        }
    }
}

我希望这不仅有助于解决您的特定问题，而且总体上还有助于解决问题。您也可以一直考虑使用online configuration kickstarter 快速启动。