Gulp won't recompile sass when changes are made - node.js

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.

Answer 2

Your Gulpfile isn't watching the sass files when changes are made. It's only looking for CSS changes. This is part of my Gulp task function to look for SCSS file changes
function serve() {
browserSync.init({
open: false,
port: 8000,
server: {
baseDir: 'src/',
index: 'index.html'
},
});
gulp.watch(paths.scss.src, gulp.series([compileSCSS]));
}
And this is my SCSS compile function
function compileSCSS() {
return gulp
.src('./src/scss/style.scss')
.pipe(plugins.rename('style.css'))
.pipe(gulp.dest('./src/css/'));
}
I have prepared a Gulp function with many required tools. You can check here
https://gist.github.com/choyan/ab034dc0539942ee0d8f0ab9788d790f