How to use gulp-sprite-generator - sass

Question

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.

Answer 1

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.

Answer 2

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: