Doesn't compile sass to css using gulp why?

Question

css

Good afternoon.
Maybe someone faced such problem and can help in solving.
Gulp starts up, everything would work fine, when saving changes to the html file, everything is fine: the page reloads and displays reliable information, but when you save sass, no changes occur on the site. help me please

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS    = require('gulp-clean-css'),
    rename       = require('gulp-rename'),
    browserSync  = require('browser-sync').create(),
    concat       = require('gulp-concat'),
    uglify       = require('gulp-uglify');

gulp.task('browser-sync', ['styles', 'scripts'], function() {
    browserSync.init({
        server: {
            baseDir: "./app"
        },
        notify: false
    });
});

gulp.task('styles', function () {
  return gulp.src('sass/*.sass')
    // output non-minified CSS file
    .pipe(sass({
    includePaths: require('node-bourbon').includePaths
    }).on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
    .pipe(gulp.dest('app/css'))
    // output the minified version
    .pipe(cleanCSS())
    .pipe(rename({suffix: '.min', prefix : ''}))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream());
});


gulp.task('scripts', function() {
  return gulp.src([
    './app/libs/modernizr/modernizr.js',
    './app/libs/jquery/jquery-1.11.2.min.js',
    './app/libs/waypoints/waypoints.min.js',
    './app/libs/animate/animate-css.js',
    './app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
    './app/libs/animateNumber/jquery.animateNumber.min.js',
    './app/libs/EqualHeights/equalheights.min.js',
    './app/libs/owl-carousel/owl.carousel.min.js',
    './app/libs/selectize/dist/js/standalone/selectize.min.js'
    ])
    .pipe(concat('libs.js'))
    .pipe(uglify()) //Minify libs.js
    .pipe(gulp.dest('./app/js/'));
});

gulp.task('watch', function () {
  gulp.watch('sass/*.sass', ['styles']);
  gulp.watch('app/libs/**/*.js', ['scripts']);
  gulp.watch('app/js/*.js').on("change", browserSync.reload);
  gulp.watch('app/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['browser-sync', 'watch']);

Answer 1

Your source files have the following function to generate link tags:

<script>
    function loadCSS(hf) {
      var ms=document.createElement("link");ms.rel="stylesheet";
      ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
    }
    loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
    loadCSS("main.min.css");   //User Styles + Media Queries
  </script>

Based on it, the href attribute refers to files directly in the app/ directory.
However, gulp places your files in app/css, as can be seen from the Styles task:
Solution: change the function arguments to the correct ones

loadCSS("css/header.min.css"); 
loadCSS("css/main.min.css");

or change the paths in the task:
.pipe(gulp.dest('app/'))

Answer 2

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        .pipe(sass()) //Скомпилируем
        .pipe(prefixer()) //Добавим вендорные префиксы
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

I have about the same settings. return seems redundant

Answer 3

What doesn't work for you? Maybe the browser just won't reload? (reboot without cache manually, check the changes). Or is it not copied?
If it doesn't reboot:
in the watch task
If it doesn't compile/build, check the paths. Now, if you have more than one sass file, there will be multiple css files. Accordingly, each of the files should be in the link of your page