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

Question

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

我只是第一次试着把我的头绕在svg-雪碧上。目标是将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所引用的内容。

我认为另一种选择是忘记svg内容的sass，将其编译成/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

对于您的问题来说可能为时已晚，但与此同时，在sprite文档中还有一个关于输出目的地的额外部分(因为它绝对不是微不足道的)。需要理解的一件重要事情是，几个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的sprite的名称和位置。

因此，默认情况下，"css"和"view"两种CSS sprite模式将它们的样式表呈现给

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

而SVG sprite本身将创建在

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

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

现在，当您使用Sass输出格式时，您将引入sprite无法控制的编译步骤。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"
                }
            }
        }
    }
}

我希望这不仅有助于解决你的特殊问题，而且在总体上也能澄清一些问题。您还可以始终考虑使用联机配置kickstarter快速启动。