Why is browserSync not working in this Gulp.js setup?

Question

Node.js

I just can't understand where the error is and why this gulpfile.js does not reload the page when making changes?
If you change PHP, then everything is updated.
And if JS or CSS (SASS), then no.

// include gulp
var gulp                = require('gulp');

// include plugins
var sass                = require('gulp-sass');
var concat              = require('gulp-concat');
var uglify              = require('gulp-uglify');
var autoprefixer        = require('gulp-autoprefixer');
var browserSync         = require('browser-sync');
var concat_css          = require('gulp-concat-css');
var css_nano            = require('gulp-cssnano');
var plumber             = require('gulp-plumber');

// other variables
var sass_option         = {
    outputStyle: 'expanded'
};
var autoprefixer_option = {
    browsers: ['last 15 versions'],
    cascade: false
};

// compile scss
gulp.task('sass', function(){
    return gulp.src('templates/autotour/asset/sass/all.scss')
        .pipe(plumber())
        .pipe(sass(sass_option))
        .pipe(autoprefixer(autoprefixer_option))
        .pipe(gulp.dest('templates/autotour/css/'));
});

// concat and minify css
gulp.task('css', ['sass'], function(){
    return gulp.src(['templates/autotour/css/all.css'])
        .pipe(plumber())
        .pipe(concat_css('all.min.css'))
        .pipe(css_nano())
        .pipe(gulp.dest('templates/autotour/css/'))
        .pipe(browserSync.reload({
             stream: true
        }));
});

// concatenate and minify js
gulp.task('scripts', function(){
    return gulp.src(['templates/autotour/js/jquery.min.js', 'templates/autotour/js/main.js'])
        .pipe(plumber())
        .pipe(concat('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('templates/autotour/js/'));
});

// browserSync task
gulp.task('browserSync', ['css', 'scripts'], function(){
    browserSync.init({
        proxy: "autotour.loc"
    });
    gulp.watch('templates/autotour/asset/sass/*.scss', ['sass']);
    gulp.watch('templates/autotour/js/*.js', ['js_reload']);
    gulp.watch('templates/autotour/*.php').on('change', browserSync.reload);
});

// reload browser after js changes
gulp.task('js_reload', ['scripts'], function(){
    browserSync.reload();
});

// start watchers
gulp.task('watch', ['browserSync'], function(){
    // other warchers
});

Answer 1

It is more convenient to specify tracked files in the BS config

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "dev"
        },
        files: ["dev/js/*.js", "dev/*.html", "dev/*.php", "dev/css/*.css"]
    });
});

And browserSync.reload();from all watch in general to remove.

Answer 2

It should be like this:
var browserSync = require('browser-sync');
reload = browserSync.reload;
it's not in your gulpfile