gulp doesn't watch my subdirectories

Question

I'm trying to set up gulp to watch all my sass files, but I'm having trouble with my subdirectories.

This is my file structure in the scss folder:
default.scss
-base
-components

My gulpfile is set up like this:

const SCSS_SRC  = './src/assets/scss/**/*.scss';
const SCSS_DEST = './src/assets/css';

gulp.task('sass', function () {
    return gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST))
});

gulp.task('default', function () {
    gulp.watch(SCSS_SRC, ['sass']);
});

When I run gulp the first time, everything is compiled normally, but if i make changes in my sass files in the subdirectories they are not compiled.
If I make a change in the default style, the files in the subdirectories are compiled too though. But I don't want to have to update the default file everytime I update the other files.

This is the first time I use gulp, so I'm sorry if I'm missing something obvious.

Answer 1

I suggest simply removing the pipe(changed()) call as changed to usually used to filter the stream immediately after gulp.src. Unless you have a huge project I just don't see that it could be very useful right before gulp.dest. It is an easy thing to try to see if it helps.