BrowserSync does not refresh the page, what's wrong?

Question

gulp.js

// 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(),
  data         = require('gulp-data'),
  concat       = require('gulp-concat'),
  postcss      = require('gulp-postcss'),
  zindex       = require('postcss-zindex'),
  uglify       = require('gulp-uglifyjs');

gulp.task('browser-sync', ['styles', 'scripts'], function() {

  browserSync.init({

    server: {
        baseDir: "./app"
    },

    notify: false
    
  });	

});

gulp.task('styles', function () {

  var postcssplugins = [
      zindex()
  ];
  
  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(postcss(postcssplugins))
    .pipe(minifycss())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream());

});

gulp.task('scripts', function() {

  return gulp.src([
      './libs/modernizr/modernizr.js',
      './libs/jquery/jquery-1.11.2.min.js',
      './libs/waypoints/waypoints.min.js',
      './libs/animate/animate-css.js',
      './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('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']);