Gulp won't recompile sass when changes are made

Question

I have created some tasks to recompile the sass with browser-sync whenever changes are made. My gulp file is as follows:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
    gulp.watch('./css/*.scss', ['sass']);
});

gulp.task('browser-sync', function() {
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });

});


gulp.task('default', gulp.series('browser-sync', function() {
    gulp.start('sass:watch');
}));

I am using node version 12.16.1, gulp-sass version 4.1.0, gulp-cli version 2.3.0, gulp local version 4.0.2 and browser-sync version 2.26.7.

Answer 1

Change this

// gulp.task('default', gulp.series('browser-sync', function() {
//     gulp.start('sass:watch');
// }));

to

gulp.task('default', gulp.series('browser-sync', 'sass:watch'));

I seriously doubt that gulp v4 supports gulp.start.

Also change to this:

gulp.task('browser-sync', function(done) {   // added done here
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });
  done();                                    // called done() here
});

When I ran your code I noticed that the sass:watch task was never starting, hence you were not watching any files at all. Here is what you should have seen in your terminal:

[21:26:21] Using gulpfile ~\OneDrive\Test Bed\simple\gulpfile.js
[21:26:21] Starting 'default'...
[21:26:21] Starting 'browser-sync'...
[21:26:21] Finished 'browser-sync' after 164 ms
[21:26:21] Starting 'sass:watch'...         // this line missing when running your code
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.0.0.186:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

Don't be fooled by the last line, browser-sync always spits that out. The reason why the sass:watch task was not starting was because gulp could never get past the browser-sync task - you have to signal gulp somehow that the task has completed and done is one way to do that. Then gulp can go to the next task, which was sass:watch. See gulp: async completion.

You also needed to make the change you noted in your comment gulp.watch('./css/*.scss', gulp.series('scss'));

There is nothing else wrong with your code - it runs perfectly fine for me.