Browser-Sync - changes to .scss not appearing in browser but appearing in .css

Question

I am trying to set up a project with browser-sync in Gulp 4. When executing my default task "gulp"- browser-sync does load and launches an instance of chrome at local:3000 and all changes made in my "src" folder to .html files reload as expected after saving. However, anything in my "sass" folder as " .scss" is compiled correctly and moved to my "dist" folder as a ".css" after saving, however, any changes are not reloaded into my browser upon saving.

I have tried re-arranging the position of browserSync.reload so that it takes place before any minimizing but that did not solve the issue. I have tried looking at the browsersync + Gulp.js doc but to no avail. I am still new with Gulp 4 and learning so it is very possible I have just mucked up something in the code or am trying to execute a series of commands that do not work together well.

/* REQUIRED PACKAGES EDITED */

var gulp = require('gulp');
    watch = require('gulp-watch');
    browserSync = require('browser-sync').create();
    concat = require('gulp-concat');
    sass = require('gulp-sass');
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    pump = require('pump');
    cleanCSS = require('gulp-clean-css');

/* GULP TASKS */

/* Pipe .HTML to Dist Folder */

gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    browserSync.stream()
  ],
  cb
  );
});

/* Clean and Pipe .SCSS to Dist Folder */

gulp.task('sass', function(cb) {
  pump([
    gulp.src('src/sass/*.scss'),
    sass().on('error', sass.logError),
    cleanCSS(),
    gulp.dest('dist/css'),
    browserSync.stream()
  ],
  cb
  );
});

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

/* Concat, Uglify & Pipe .JS to Dist Folder */

gulp.task('js', function(cb) {
  pump([
    gulp.src('src/js/*.js'),
    concat('main.js'),
    uglify(),
    gulp.dest('dist/js'),
    browserSync.stream()
  ],
  cb
  );
});

/* Minify & Pipe .IMG to Dist Folder */

gulp.task('imagemin', function(cb) {
  pump([
    gulp.src('src/img/*'),
    imagemin(),
    gulp.dest('dist/img'),
    browserSync.stream()
  ],
  cb
  );
});

/* Browser-Sync */

gulp.task('browser-sync', function() {
  browserSync.init({
      server: {
          baseDir: './src'
      }
  });
});

gulp.task('watch', function() {

  gulp.watch('./src/sass/*.scss', gulp.series('sass'));
  gulp.watch('./src//js/*.js', gulp.series('js'));
  gulp.watch('./src/*.html', gulp.series('html'));

});

/* RUN DEFAULT - RUN ALL TASKS */

gulp.task('default', gulp.parallel('html', 'sass', 'js', 'imagemin', 'browser-sync', 'watch')); 

I would expect everything to function but again, upon any changes made to the .scss file, they take place and are saved to the .css file but the changes do not appear in the browser. Any help is very much appreciated!

Answer 1

Change this:

gulp.watch('./src/sass/*.scss', gulp.series('sass'), browserSync.reload);

to:

gulp.watch('./src/sass/*.scss', gulp.series('sass', browserSync.reload));

Also in this:

gulp.task('sass', function(cb) {
   pump([
     gulp.src('src/sass/*.scss'),

     // don't call browserSync.stream() before sass()
     // plus you already have it in your scss watch to reload
     // so either move this to the end - after gulp.dest - and remove it from the watch
     // or remove it from here and leave in the watch

     //  browserSync.stream(),

     sass().on('error', sass.logError),
     cleanCSS(),
     gulp.dest('dist/css')
   ],

   cb;
  );
 });

---

// in your watch task:

gulp.watch("./src/*.html", { events: 'all' }, function(cb) {
    browserSync.reload();
    cb();
  });



gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    //  browserSync.stream()
  ],
  cb
  );
});