H
H
howehohit2015-11-02 10:23:44
css
howehohit, 2015-11-02 10:23:44

How to work with sprites in gulp?

Hello. I collect sprites through gulp (gulp-spritesmith), everything works fine, but there are a few points (perhaps I misunderstand something).
Now I have the following algorithm: I cut out all the images that should be in the sprite, put them in the images / sprites folder, gulp generates a sprite + style file with sizes and coordinates. I take the dimensions and position from it with pens, insert it at the right place in the style file during layout.
Problem: If you need to add more icons to this sprite - it is regenerated with each new icon and it turns out that the coordinates of all previous icons need to be changed.
What I would like to do:
Ideally: (doubt it is possible).
1. I put icons in the images/sprites folder, and put them in different folders depending on the sprite (that is, each folder inside the images/sprites folder is a separate sprite.
2. I write regular css, I insert pictures somewhere.
3. When building gulp generates sprites from folders, then iterates through each style file (step 2) and if it finds an image name from a sprite folder (for example, ../images/sprite/picture.png) it replaces this entry with the sprite name + coordinates
. When adding new icons (even to the current finished sprite), everything is collected and substituted from the beginning
Not ideal:
1. I put the icons in the images / sprites folder, and I put them in different folders depending on the sprite (that is, each folder within images/sprites - individual sprite.
2. I write the usual css, insert the address of the sprite manually.
3. When adding new icons to the current finished sprite, they are added without changing the structure of the previous icons (so as not to prescribe the coordinates again)
Thanks in advance
PS Yes, I read this article habrahabr.ru/post/227945 :)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel Torbeev, 2015-11-02
@glizer

gulp-spritesmith in addition to the sprite generates a mixin, by connecting which to the preprocessor, you can include the desired image by including. Something like:
Only the name of the image. The mixin itself will substitute the desired background (sprite image) and background position, dimensions

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question