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);

如何在/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('.')

并从config中处理该文件夹。

Answer 2

对于你的问题来说可能为时已晚，但与此同时在svg-sprite docs中还有一个关于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精灵模式"css"和"view"会将其样式表呈现给

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快速启动。

修改gulp-svg-sprite

2 个答案: