Doesn't compile sass to css using gulp in sublime text, why?

Question

Sass

Good afternoon.
Maybe someone faced such a problem (topic name) and can help in solving.
Gulp starts, everything works 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 (because the css code is not updated). I don’t know English, I looked for some answers in the bourgeoisie, but I didn’t find anything, thanks in advance.
gulpfile.js:

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

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

gulp.task('styles', function () {
  return gulp.src('sass/*.sass')
  .pipe(sass({
    includePaths: require('node-bourbon').includePaths
  }).on('error', sass.logError))
  .pipe(rename({suffix: '.min', prefix : ''}))
  .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
  .pipe(minifycss())
  .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/plugins-scroll/plugins-scroll.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']);

I use: starter template for layout .

Answer 1

I've been tinkering with this pattern myself. Change the 'styles' task:
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());
});

Answer 2

The same problem. I watch the same video course. How did you solve it?