CODEWITHSUNDEEP
sassgulpsprite
OVER-C
OVER-C

Reputation: 207

How to use gulp-sprite-generator

I would like create a sprite with Gulp, create a CSS file with coordinates automatically and insert the image from this sprite with name, like :

.my_class {
    background-image: url("images/my-image.png");
}

After a research I would like use gulp-sprite-generator but I do not understand how I can use it.

In my gulp file I add the configuration of this plugin :

gulp.task('sprites', function () {
    var spriteOutput = gulp.src(app + '/css/*.css')
        .pipe(plugins.spriteGenerator({
            baseUrl: 'app/images/sprite',
            spriteSheetName: 'sprite.png',
            spriteSheetPath: 'dist/images/'
        })
    );

    spriteOutput.css.pipe(gulp.dest('dist/css/'));
    spriteOutput.img.pipe(gulp.dest('dist/images/'));
});

But when I call gulp sprites in a Terminal, no sprites are created.

So, I guess I need use the CSS for tell him to create some sprite from the sprite folder but I don't get it.

Thanks for your help.

Upvotes: 2

Views: 2801

Answers (2)

Alex Chuev
Alex Chuev

Reputation: 713

Look at the example – https://github.com/alex-chuev/gulp-sprite-example. It is usable.

But I also met a problem. I had saved my images from Photoshop with Ctrl + Alt + Shift + S and I got the same message:

Created 0 sprite(s) from 0 images, saved 0% requests

I have resolved the issue by disabling the "Interlaced" checkbox in the save dialog:

The Protoshop image save dialog

Upvotes: 0

Mr. Noddy
Mr. Noddy

Reputation: 1590

I have done some work around and found gulp.spritesmith plugin

https://github.com/twolfson/gulp.spritesmith

using this plugins I am able to create sprites image and css for my application.

that's how I did it...

var spritesmith = require('gulp.spritesmith');

// Sprites task - create sprite image
gulp.task('sprites', function () {
  var spriteData = gulp.src(paths.source.images).pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    imgPath: paths.build.images + 'sprite.png'
  }));
    spriteData.css.pipe(gulp.dest(paths.build.css));
    spriteData.img.pipe(gulp.dest(paths.build.images));
});

this way you'll get sprite.css file in destination css folder and sprite.png in destination images folder.

Upvotes: 1

Related Questions