Where is the gulp project build error (sass issue)?

Question

Sass

Good afternoon!
The project structure is as follows:
Root:

The app folder where everything should compile:

And gulpfile.js with comments:

var gulp = require('gulp'),
  sass = require('gulp-sass'),// подключение sass
  rename = require('gulp-rename'),//переименовываем  миниф файл
  cleanCSS = require('gulp-clean-css'),//минифицируем
  autoprefixer = require('gulp-autoprefixer'),//автопрефикер
  livereload = require('gulp-livereload'),//livereload
  connect = require('gulp-connect');//соед с уд сервером

//livereload
  gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});
 
gulp.task('css', function () {
  return gulp.src('app/sass/main.sass')//путь к папке с sass-файлом, с которым будем работать
    .pipe(autoprefixer({
        browsers: ['last 15 versions']
    }))
    .pipe(sass())//sass
    .pipe(cleanCSS()) //минифицируем css
    .pipe(rename('bundle.min.css'))//как назовем скомпилированный min- файл
    .pipe(connect.reload())
    .pipe(gulp.dest('app/css'));//куда выкладываем итоговый файл
});

The problem is that changes are made by livereload, but there are no changes in bundle.min.css - the compiled final file.
What's my mistake?
Thank you.

Answer 1

Change places

.pipe(gulp.dest('app/css')) //куда выкладываем итоговый файл
.pipe(connect.reload());