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

我需要更改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并没有引用它

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

谢谢
 我知道这可能太晚了，但我的解决方案是这样的：

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('.')

从配置中处理文件夹。
解决您的问题可能为时已晚，但与此同时，svg sprite文档中还有一个额外的部分（因为它绝对不是琐碎的）。需要了解的一件重要事情是，几个
dest
选项相互关联（只要不使用绝对路径）


config.dest
指定一个主输出目录，用作所有输出模式的基础
config..dest
与
config.dest
相关，用作当前模式的主要输出目标
config..render..dest
（如果给定）再次相对于
config..dest
，并用作指定的
文件的输出路径和文件名。它默认为“精灵”。

config..sprite

指定精灵相对于

config..dest

的名称和位置

因此，默认情况下，两种CSS精灵模式

“CSS”

和

“view”

将把它们的样式表呈现给

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

---

我希望这不仅有助于解决您的特定问题，而且总体上也能让事情变得明朗一点。你也可以经常考虑使用它快速地离开。< /P>我如何设置自定义的胡子模板？如果没有这种可能性，它将毫无用处。@actimel自定义模板可以通过

mode.css.render.scss.template

设置（如上面的示例所示）。请查找有关的所有信息。您可能还对简化配置的方法感兴趣。文档很难阅读，所以我没有找到这个选项。非常感谢。

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

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