Change output css folder

[simplenotezy]

Hi,

How can I change output folder? Currently it outputs to ./css/sprite.css but I would like it to go into ./dist/styles/sprites.css

Documentation doesn't seem to contain anything

[simplenotezy]

I managed to do it like this:

gulp.task('sprite', function () {
    var spriteData = gulp.src('assets/sprites/*.png')
        .pipe(spritesmith({
            /* this whole image path is used in css background declarations */
            imgName: '../dist/images/sprite.png',
            cssName: 'sprite.css'
        }));
    spriteData.img.pipe(gulp.dest('img'));
    spriteData.css.pipe(gulp.dest('../dist/styles'));

    return spriteData.pipe(gulp.dest('assets/styles/'));
});

[twolfson]

Gulp plugins never control directories, they only control filenames. Target directories are controlled via gulp.dest

The root issue is we're specifying a directory for imgName, we should be using imgPath instead:

https://github.com/twolfson/gulp.spritesmith/tree/6.11.0#spritesmithparams

        .pipe(spritesmith({
            imgName: 'sprite.png',
            imgPath: '../dist/images/sprite.png',
            cssName: 'sprite.css'
        }));

Additionally since we're generating 2 streams, we need to consolidate their end state so gulp knows when the task has properly finished

var merge = require('merge-stream');

gulp.task('sprite', function () {
    var spriteData = gulp.src('assets/sprites/*.png')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            imgPath: '../dist/images/sprite.png',
            cssName: 'sprite.css'
        }));
    return merge(
        spriteData.img.pipe(gulp.dest('img')),
        spriteData.css.pipe(gulp.dest('../dist/styles'))
    );
});