Running tasks in series

[laurentperroteau]

Hello, thank for this plugin I use everyday,

My need: running tasks in series.

My problem:

• Gulp-svg-sprite has "finish" status after SVG file creation => OK
• If I want to generate SCSS (or CSS, or LESS) file, Gulp-svg-sprite has "finish" status before creation of file => NOT OK

I try with Gulp recipe Running task in series and with Run sequence.

gulp.task('svg:sprite', function() {
    gulp.src('path/to/assets/*.svg')
        .pipe(svgSprite( /* config */ ))
        .pipe(gulp.dest('out'));
});

gulp.task('svg:replace', function () {
    // modify SCSS output
});

gulp.task('svg:sass', function () {
    // compile SCSS
});

gulp.task('svg', function () {
    // svg:replace is running before svg:sprite update the SCSS file
    runSequence('svg:sprite', 'svg:replace', 'svg:sass');
});

[jkphl]

Hey @laurentperroteau,

I'm sorry but this doesn't sound like a (gulp-)svg-sprite problem but more like a general Gulp question. As I'm not a regular Gulp user I'm afraid I can't help you with this. The only thing I can imagine is merging your distinct tasks into a single one — then they would definitely be run in sequence.

Anyone else out there who might help? I'll leave this task open for some time so that someone with more Gulp experience might jump in ...

Cheers, Joschi

[laurentperroteau]

Hey @jkphl,

I think is a gulp-svg-sprite problem because "running tasks in series" is working for me with all other plugins.

Anyway, Gulp 4.0 apparently change task system (the problem may be corrected).

Thanks for leaving this issus open.

[rafaelbiten]

@laurentperroteau, I was having some problems to run tasks in series and parallel. Recently I decided to try Gulp 4.0 (which seems to be very stable already) and everything got so much easier. I would suggest you that and if you'd like, check the project I've been working on for some examples.

[jkphl]

@rafaelbiten Thanks for sharing your experiences here! :+1:

[mikestreety]

@laurentperroteau The way I get round this by having the plugin generate the scss map and drop it in the css folder - gulp then sees this as a file change and recompiles the sass.

More info can be found in my blog post - hope this helps!

[tbredin]

+1 Wish this would wait for the other files to output before finishing! If anyone else is having the same issue I managed to force this to run in series like so:

gulp.task('icons', (done) => {
    var stream = gulp.src('**/*.svg', {cwd: 'app/images/icons'})
        .pipe(svgSprite(config))
        .pipe(gulp.dest('app/templates/partials'));

    stream.on('end', function() {
        done();
    });
});

Hope this helps someone else

[jkphl]

@tbredin Thanks for sharing this!

As mentioned before I'm not a regular Gulp user at the moment and I just lack the knowledge to fix this somewhere in the module itself. If someone of you is able to help on that, I'd totally appreciate your PR. Thanks! :)

[jkphl]

Closing due to inactivity

[jadrake75]

@tbredin solution works. Since I am calling the task via a function with arguments you need to have the function return the stream. so my syntax is a lot like

function buildSprite(done, prefix, cfg) {
   // do a bunch of cfg manipulation based on prefix
   var stream = gulp.src('resources/svg/'+prefix+'/**/*.svg')
                                .pip(svgSprite(cfg)
                                .pipe(gulp.dest('dist/resources/' + prefix);
    stream.on('end', () => {
            done();
    });
    return stream;
}

gulp.task('create-base-types', done => {
    return buildSprite(done, 'base-type');
});

gulp.task('create-sprites', gulp.series(['create-base-types','<other similiar configs>']));