Can't get the gulp task to generate any sprite.png

[spandadk]

Perhaps a rookie mistake, but I can't seem to get my gulp task to generate any image/sprite.png.

I've followed your example setup and created src folders accordingly. I have one file in my css/ dir: style.css, which contains the following:

#image1 {
    background: url("../image/assembly_line_illu_banana.png");
}

In my image/ dir, I have multiple .png files.

var gulp = require('gulp');
var sprite = require('gulp-sprite-generator');

gulp.task('sprites', function() {
    var spriteOutput;

    spriteOutput = gulp.src("./src/css/*.css")
        .pipe(sprite({
            baseUrl:         "./src/image",
            spriteSheetName: "sprite.png",
            spriteSheetPath: "/dist/image"
        }));

    spriteOutput.css.pipe(gulp.dest("./dist/css"));
    spriteOutput.img.pipe(gulp.dest("./dist/image"));
});

gulp.task('default', ['sprites']);

An exact copy of my src/css/style.css file gets copied to the dist folder, but nothing else happens. Any ideas?

C:\html\gulp\gulp-sprite-generator>gulp
[14:31:41] Using gulpfile ~\html\gulp\gulp-sprite-
generator\gulpfile.js
[14:31:41] Starting 'sprites'...
[14:31:41] Finished 'sprites' after 6.99 ms
[14:31:41] Starting 'default'...
[14:31:41] Finished 'default' after 5.87 µs
[14:31:41] [gulp-sprite-generator] Stylesheet style.css has been created

[spandadk]

@gobwas Can you confirm that im hopefulyl just doing something wrong at my end? :) Really have high hopes that it works, since I haven't been able to find any other Gulp tasks that automatically looks for the images in the .css and replaces with corresponding generated sprite image positions.

[gobwas]

@spandadk hi! Sorry for latency =) Does the file paths links to existing files? Does your case looks like some test cases in test.js? I will look at all issues at today evening GMT+3 more closely.

[spandadk]

@gobwas NP AT ALL - and thanks for responding. In my above post I edited some path names, but else everything else is linking correct - atleast it seems to me :)

I just did a screenshot of my directory structure in any case that would also help:

Also did a .zip of the project here: http://www.filedropper.com/testgulp-sprite-generator

Chances are that i've most likely misunderstood something, but nevertheless extremely happy you taking the time to look at this!

edit: had a look at test.js - being new to Gulp, im not sure if I understood everything going on there, so just trying to stick to the very basics for now :)

[gobwas]

Does your css file contains exactly the name like "../image/assembly_line_lilu_banana.png" or just "../image/banana.png"? =)

[spandadk]

Just updated my initial comment to correspond with the right image path - just tried to avoid giving my weird filenames :)

It's exactly the correct filename as seen in the image folder :)

#image1 {
    background: url("../image/assembly_line_illu_banana.png");
}

[gobwas]

Aw. Sorry for my inattention =) You must use background-image insteadof background =)