Sass doesn't compile with css gulp4, what's the problem?

Question

Sass

Hello friends!
I installed Gulp 4 connected sass and everything works, but only when I restart gulp through the terminal, until that moment, neither the browser nor the css file is updated, I sit all day, I can’t understand what the problem is.
Do not judge strictly, I'm new to this)
here is my gulpfile.js

var gulpversion    = '4'; // Gulp version: 3 or 4

// Подключаем Gulp и все необходимые библиотеки
var gulp           = require('gulp'),
    gutil          = require('gulp-util' ),
    sass           = require('gulp-sass'),
    browserSync    = require('browser-sync'),
    cleanCSS       = require('gulp-clean-css'),
    autoprefixer   = require('gulp-autoprefixer'),
    bourbon        = require('node-bourbon'),
    ftp            = require('vinyl-ftp');

// Обновление страниц сайта на локальном сервере
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "http://localhost:8888/opencart3/",
    notify: false
  });
});

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
return gulp.src('./sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});




// Компиляция stylesheet.css
gulp.task('sass', function() {
  return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
    .pipe(sass({
      includePaths: bourbon.includePaths
    }).on('error', sass.logError))
    .pipe(autoprefixer(['last 15 versions']))
    .pipe(cleanCSS())
    .pipe(gulp.dest('catalog/view/theme/apple/stylesheet/'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('code', function() {
  return gulp.src(['catalog/view/theme/apple/template/**/*.twig', 'catalog/view/theme/apple/libs/**/*'])
  .pipe(browserSync.reload({ stream: true }))
});

// Выгрузка изменений на хостинг
gulp.task('deploy', function() {
  var conn = ftp.create({
    host:      'hostname.com',
    user:      'username',
    password:  'userpassword',
    parallel:  10,
    log: gutil.log
  });
  var globs = [
  'catalog/view/theme/apple/**'
  ];
  return gulp.src(globs, {buffer: false})
  .pipe(conn.dest('/path/to/folder/on/server'));
});


if (gulpversion == 4) {
  gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));
    gulp.watch('catalog/view/theme/apple/template/**/*.twig', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
  });
  gulp.task('default', gulp.parallel('sass', 'browser-sync', 'watch'));
}

Answer 1

It is also not entirely clear to me what you are doing, what should happen and how it should work?
In general, I can not understand your problem. Here in the text it is said that under some conditions the assembly works, but not under others. What conditions are not clear. The fastest way to find problems is by comparing differences. Why it works in some conditions, what changes in other launch conditions, what stops working.
According to the file itself, well, your tracking is set up strangely
gulp.task('watch', function() {
gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));
It seems to be the norm here, track changes in the file, run the assembly task. Only here you track only the main file. This means that the blocks that you include in it will be viewed by the observer only once, immediately after the connection with the import directive, after which the observer will not replace all changes in the imports included in the file and will not rebuild the main file. You need to specify the path to the files to be tracked: 'catalog/view/theme/apple/stylesheet/**/*.sass' for example. Although if you have all the code in one file, without using import, then this is normal.
Next on the
faucet gulp.task('watch', function() {
gulp.watch('catalog/view/theme/apple/template/**/*.twig', browserSync.reload);
gulp.watch('catalog/ view/theme/apple/js/**/*.js', browserSync.
gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
With these rules, you tell Gulp: "Watch all these files, and if they change, reload the page and that's it." That is, no assembly occurs, just a reboot. Although if this is the way it should be, or something is being done somewhere else, then it means that it should be, probably.
I also noticed that you have two tasks with the same name 'sass'. It became interesting what Galp does in such cases: swears or redefines the task?
I don’t see any more problems at a glance, it’s unusual to watch such an assembly, it’s very chaotic in my opinion. For example, I organize browserSync in one task and do not have to add reload to other tasks:

const watcher = () => {
  watch(options.scripts.src, scripts);
  watch(options.html.watch, html);
  watch(options.styles.watch, styles);
  watch(options.copy.src, copy);
};

const server = () => {
  browserSync.init({
    server: {
      baseDir: output,
    },
  });

  browserSync.watch(`${output}/**/*.*`).on('change', browserSync.reload);
};

As a result, it turns out that if some task does not work, the problem is always in this task and it cannot be otherwise.