CODEWITHSUNDEEP
sassgulp
Manuel Di Iorio
Manuel Di Iorio

Reputation: 3761

Gulp sass watching even the imports and run the main parent

I have this gulp task:

gulp.task('css', function() {
    return gulp.src( [CONFIG.css.source + '/**/*.scss'].concat(CONFIG.css.ignore) )
        .pipe( watch([CONFIG.css.source + '/**/*.scss'].concat(CONFIG.css.ignore)) )            
        .pipe( sass({errLogToConsole: true}) )
        .pipe( gulp.dest(CONFIG.css.dest) )
});

With this task, I watch the .scss files and apply the sass on them. The problem is that when I use @import partial.scss. These partials are not watched, so I have everytime to save the partial file and then save even the main style.scss file (who calls the import), in order to start the task.

How can I watch even the imports, without have to save both import and importer scss files ?

To make it simple, let's say I have a file style.scss that imports partials/partial.scss. When I edit and save the partial, only the task on style.scss should run.

Notes:

CONFIG.css.ignore is the path to the partials folder (in this way, they will not be directly watched and saved in the wrong folder), but this also causes the problem that the partials are not watched..

Upvotes: 1

Views: 596

Answers (1)

Jeroen
Jeroen

Reputation: 63719

I suggest / use a slightly different approach. I have a sepate task to kick off watchers, e.g.:

var pathToAllScssIncludingPartials = '/**/*.scss';

gulp.task('watchStyles', [], function() {
    gulp.watch(pathToAllScssIncludingPartials, ['css']);
});

This kicks off 'css' whenever an input file changes. No need do any watch stuff inside the css task anymore.

Upvotes: 2

Related Questions