I need to change the directory that the sprite files are compiled to.
I'm just trying to wrap my head around gulp-svg-sprite for the first time. The goal is to have the scss file included in my sass directory, and then compiled with the rest of my partials - this part works fine. However, the generated svg directory is also put into the sass directory, so I end up with:
- theme
-- sass
---- _sprites.scss
---- svg
------ sprite.css-58jkdf8js.svg
-- css
---- styles.css
When I actually need this:
- theme
-- sass
---- _sprites.scss
-- css
---- styles.css
---- svg
------ sprite.css-58jkdf8js.svg
Of course, the compile stylesheet has background: url(svg/sprite.css-58adlksjf.svg);
How can I make that sprite directory get compiled under /css instead of /sass?
This is the relevant part of 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'));
})
I only added in the symbol mode because I was hoping I could just make another copy there, but it just stores it as sprite.symbol.svg which is not what the CSS is referencing.
I'm thinking an alternative is to forget about sass for the svg stuff, compile it to /css and then include another stylesheet. However, that means I would have to include it before the main stylesheet (which right now seems ok, but I haven't thought that part through yet).
Thanks!
I understand it might be too late but my solution was something like this:
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('.'));
})
I prefer to specify
config.dest : '.'
even it's default, and also to leave
gulp.dest('.')
and handle the folder from config.
It's probably too late for your problem, but in the meantime there's an extra section about output destinations in the svg-sprite docs (because it's definitely not trivial). An important thing to understand is that the several dest options work relative to each other (as long as you don't use absolute paths).
config.dest specifies a main output directory used as the base for all output modes.config.<mode>.dest is relative to config.dest and is used as main output destination for the current mode.config.<mode>.render.<format>.dest (if given) is again relative to config.<mode>.dest and is used as output path and file name for the specified <type> files. It defaults to "sprite.<format>".config.<mode>.sprite specifies the name and location of the sprite relative to config.<mode>.dest.
So by default the two CSS sprite modes "css" and "view" will render their stylesheets to
config.dest + config.<mode>.dest + "sprite.<format>"
while the SVG sprite itself will be created at
config.dest + config.<mode>.dest + config.<mode>.sprite
The relative path used for referencing the sprite from within the stylesheet will be derived automatically from these two locations.
Now, when you use the Sass output format, you introduce a compilation step that svg-sprite has no control over. The only thing svg-sprite knows is that your final compiled CSS is supposed to be found at config.dest + config.<mode>.dest + "sprite.<format>" (or whatever you configured for config.<mode>.render.css.dest in particular). You just need to ensure that your Sass compilation result really lands there an you will be all set.
Having said all that, in your particular situation, your configuration should look like this (off the top of my head):
var config = {
"dest" : "theme",
"mode" : {
"css" : {
"render" : {
"scss" : {
"dest" : "../sass/_sprites.scss"
}
}
}
}
}
I hope this didn't only help solving your particular problem but also clear things up a little in general. You might also always consider using the online configuration kickstarter to get off the ground quickly.
