31472

Modifying destination and filename of gulp-svg-sprite

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

<strong>How can I make that sprite directory get compiled under /css instead of /sass?</strong>

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!

Answer1:

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.

Answer2:

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

    <li>config.dest specifies a main output directory used as the base for all output modes.</li> <li>config.<mode>.dest is relative to config.dest and is used as main output destination for the current mode.</li> <li>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>".</li> <li>config.<mode>.sprite specifies the name and location of the sprite relative to config.<mode>.dest.</li> </ul>

    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 <strong>final compiled CSS</strong> 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.

    <hr>

    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.

Recommend

  • How to concat JS library files using gulp?
  • Error when using naming convention in Gulp
  • Gulp missing the SASS executable
  • Angular depandency problems at minify compiling
  • Vista focus issue when invoking Microsoft Word spell check from Oracle Forms
  • MPICH communication failed
  • Add vcard to Contacts with Mail rules and Applescript
  • Copy folder content with Ansible
  • Thrust filter by key value
  • Messed up characters in webpages (especially social media)
  • Undefined navigator.push React-native 0.43.4
  • How can I make this modal persistent?
  • redirect_to root_url and return unless @user.activated
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • Center align outputs in ipython notebook
  • Django invalid literal for int() with base 10
  • Adjust width of select element according to selected option's width
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Paperclip, set path outside of rails root folder
  • Spring security and special characters
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Deleting and Updating values from a cusrsor adapter
  • req.body is undefined - nodejs
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • Deserializing XML into class C#
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Importing jscolor library in angular 2
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • GridView Sorting works once only
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • python draw pie shapes with colour filled
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?