Modifying destination and filename of gulp-svg-sprite

Question

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!

Answer 1

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.