Gulp - compile scss files in subfolders

Question

I have main folder that is running gulp server, and it contains projects with separate files. I'd like to make gulp watch subfolders and compile scss files for other projects too, not only for currently running. I add "watch" for subfolders, when I change scss in subfolders it says "injected: main.css", but doesn't alter "main.css".

Structure of my folders:

BASE/scss
    /projects/project1/scss
             /project2/scss
             /projects3/scss

I want to basically made possible to run gulp on BASE folder and watch and compile all .scss files separately in all scss folders shown above - for base folder and projects in subfolder.

How to make that scss -> css compilation for subfolders too ?

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(sass().on('error', sass.logError))
          .pipe(autoprefixer('last 10 versions', '>0.5%'))
        .pipe(gulp.dest('css/'))
        .pipe(browserSync.stream());
});


gulp.task('serve', ['sass'], function () {
    browserSync.init({
        server: ".",
        notify: {
            styles: {
                top: 'auto',
                bottom: '0'
            }
        }
    });

    gulp.watch('scss/*.scss', ['sass']); // main folder
    gulp.watch('./projects/**/scss/*.scss', ['sass']); // added for subfolders, 
   // detects changes in files but doesn't making css output
        });

Answer 1

What you are asking for could mean many things. So I'll start by describing what your gulp task tells me you are doing:

Your gulp task will watch for any changes to .scss files found immediately under BASE/scss/ and for changes to .scss files found immediately under any directory called scss/ where the directory is a sub-directory (recrusive) of BASE/projects/ . When a change is detected to any of those files, your 'sass' task will be run, compiling just the .scss files found immediately under BASE/scss/ (non-recursively). It places the compiled .css in BASE/css/ . It will not compile any files found under BASE/projects/ .

What this means is that any .scss file found under BASE/projects will not be compiled unless it is @import ed by a file found immediately under BASE/scss/ .

The first problem that sticks out to me is what your providing to gulp.src . It looks like gulp.src('scss/*.scss') is only including .scss files found directly under BASE/scss/ .

You can include the files under BASE/PROJECTS by adding it to the gulp.src call in the 'sass' task using

gulp.src([
    'scss/*.scss',
    './projects/**/scss/*.scss'
])

I have recreated this scenario given your 'sass' task and the directory structure you describe. This argument to gulp.src works perfectly using gulp v3.9.1.

The next question I have is what is main.css ? I would not expect a file called main.css to be output to BASE/css/ unless there is a file at BASE/scss/main.scss .

If all of this is working (like it does in my tests) and you still don't see the correct files being compiled, there are additional options.

You may want to expand your glob patterns to match files recursively. This can be done with the following patterns

gulp.src([
    'scss/**/*.scss',
    './projects/**/scss/**/*.scss'
])

gulp.watch('scss/**/*.scss', ['sass']); // main folder
gulp.watch('./projects/**/scss/**/*.scss', ['sass']);

**/*.scss globs match all .scss files recursively under a directory. *.scss only matches .scss file immediately under a directory.

If all else fails, I would suggest isolating your compilation problem outside of gulp.watch . Strip out all extraneous code and build up the functionality line by line to ensure you are achieving the appropriate results.