Manuel Di Iorio Manuel Di Iorio - 8 months ago 89
Sass (Sass) Question

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..

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download