Почему в этой настройке Gulp.js не работает browserSync?

Question

[Сергей Горячев]

Никак не могу понять, где ошибка и почему этот gulpfile.js не перезагружает страницу при внесении изменений?
Если менять PHP то всё обновляется.
А если JS или CSS (SASS), то нет.

// 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

[Serj-One]

Удобней указывать отслеживаемые файлы в конфиге BS

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

А browserSync.reload(); из всех watch вообще убрать.

Answer 2

[sergey]

Должно быть так:
var browserSync = require('browser-sync');
reload = browserSync.reload;
в твоем же gulpfile этого нет

Comments

[Сергей Горячев]

Первая строка есть.
Изменение reload не помогло.

[sergey]

reload = browserSync.reload - без этого browserSync вообще не может работать

[Сергей Горячев]

SM: да есть это всё, только я накосячил в другом, у меня перезагружается только *.php, а в остальные я не прописал.

[sergey]

Sergey Goryachev: бывает:)

[Сергей Горячев]

SM: Хотя не всё так безоблачно. в php работает, а в скриптах и стилях все равно нет