Answer the question
In order to leave comments, you need to log in
How to generate two or more sprite files in gulp?
Actually the question is in the title, I will only add that I use gulp.spritesmith The task
looks like this:
gulp.task('sprite:build', function() {
var spriteData =
gulp.src(path.src.spriteOrigin_1)
.pipe(plumber())
.pipe(spritesmith({
imgName: path.build.spriteImgName_1,
cssName: '_sprite-data-1.scss',
cssFormat: 'scss',
algorithm: 'binary-tree',
cssTemplate: 'sass.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name
}
}));
spriteData.img.pipe(gulp.dest(path.build.spriteImgPath));
spriteData.css.pipe(gulp.dest(path.src.spriteSass));
});
$s-pic-1: 0px 187px 0px -187px 186px 191px 593px 532px '../img/sprite/sprite-2.png';
{{#items}}
${{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}
@mixin spriteWidth($sprite) {
width: nth($sprite,5);
}
@mixin spriteHeight($sprite) {
height: nth($sprite,6);
}
@mixin spritePosition($sprite) {
background-position: nth($sprite,3) nth($sprite,4);
}
@mixin sprite($sprite) {
@include spritePosition($sprite);
@include spriteWidth($sprite);
@include spriteHeight($sprite);
}
Answer the question
In order to leave comments, you need to log in
Somewhere you have an error, most likely in the paths.
My sprites are generated in a similar way.
Sources:
There is a folder /images in it I have two folders for two different templates of the same site, let's say /sprite-1 and /sprite-2
Each folder has its own images.
Next:
1. Make two tasks with different names
2. In gulp.src, specify your path to the sources for each task
3. In imgName, specify a different name, it will be written to the template
4. In cssName, specify different names of the generated file with variables, otherwise it will overwrite.
5. Leave the path to the .mustache template the same
Output:
/img
--/sprite-1
--/sprite-2
The only thing I don’t like is the different folders that are issued, for some reason it didn’t turn out to be thrown into one, well, and the fact that there are two different tasks.
Ideally, I would like to have a smart generator that would look at the names of the source files and break them into sprites, you can set prefixes and not take a steam bath. Plus the maximum number of images "included" in the sprite, otherwise it swells.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question