Why is gulp.watch not working as it should?

Question

JavaScript

gulp.watch doesn't see changes in #src/index.html.
changes in #src/scss/style.scss sees and starts compilation, only html does not see....

gulpfile.js

// const { series } = require('gulp');
const gulp = require('gulp');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');

function sass_compile(d) {
  
  gulp.src('./#src/scss/style.scss')
    .pipe(sass({
      errorLogToConsole: true,
      outputStyle: 'compressed'
    }))
    .on('error', console.error.bind(console))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 5 versions'],
      cascade: false,
      grid: 'autoplace'
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css/'));
  
  gulp.src('./#src/scss/style.scss')
    .pipe(sass())
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 5 versions'],
      cascade: false,
      grid: 'autoplace'
    }))
    .pipe(gulp.dest('./#src/css/'));
  d();
}

function watch() {
  console.log('detected');
  
  gulp.watch('./#src/scss/style.scss', sass_compile);
  gulp.watch('./#src/*.html', gulp.dest('./dist/'));
  gulp.watch('./#src/js/**/*.js', gulp.dest('./dist/js'));
  gulp.watch('./#src/img/**/*.{png, jpg, ico, gif, webp}', gulp.dest('./dist/img'));

}
function launchProject(d) {
  gulp.src('#src/img/**/*.{png, jpg, ico, gif, webp}')
    .pipe(gulp.dest('dist/img/'));
  
  gulp.src('#src/js/**/*.js')
    .pipe(gulp.dest('dist/js/'));
  
  gulp.src('#src/css/**/*.css')
    .pipe(gulp.dest('dist/css/'));
  
  gulp.src('#src/**/*.html')
    .pipe(gulp.dest('dist/'));
  d();
}
exports.sass_compile = sass_compile;
exports.watch = watch;
exports.launchProject = launchProject;
exports.default = gulp.series(sass_compile, watch);

Project structure:

Answer 1

in watch the second parameter is the name of the function that is executed when it changes, in scss it is sass_compile so it is executed, for html you need to make a separate function that will copy html and pass it as the second parameter.

Answer 2

function gulpDest(){
    return gulp.dest('./dist/');
}

will it work?