Gulp Browser Reload не работает - с помощью Watch on SASS

Question

Я хочу иметь задачу просмотра, которая перезагружает браузер. Ниже смотреть отлично подходит для компиляции sass, но браузер не перезагружает - мысли?

// Gulp Packages 
var gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    sass = require('gulp-sass'), 
    sourcemaps = require('gulp-sourcemaps'), 
    browserSync = require('browser-sync').create(), 
    reload = browserSync.reload; 

// Default Task 
gulp.task('default', ['copyFiles','styles']); 

// Copy Files 
gulp.task('copyFiles', function() { 
    gulp.src('./source/*.php').pipe(gulp.dest('./public')); 
}); 

// Compile SASS 
var sassOptions = { 
    errLogToConsole: true, 
    outputStyle: 'compressed' 
}; 
gulp.task('styles', function() { 
    gulp.src('./scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(sass(sassOptions).on('error', sass.logError)) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./css/')); 
}); 

// Watch Task 
gulp.task('watch', function() { 
    gulp.watch('./scss/includes/**/*.scss', ['styles']); 
    gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload); 
}); 

Answer 1

Я хотел бы предложить конфигурацию, аналогичную:

// Static Server + watching scss/html files 
gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: "./app" 
    }); 

    gulp.watch("app/scss/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 
}); 

// Compile sass into CSS & auto-inject into browsers 
gulp.task('sass', function() { 
    return gulp.src("app/scss/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('default', ['serve']); 

Источник: https://www.browsersync.io/docs/gulp

Вам необходимо инициализировать сервер и наблюдать изменения в SASS и HTML. Затем в вашей задаче компиляции sass вам нужно добавить .pipe(browserSync.stream()); после команды dest, чтобы browserSync мог забрать ваш недавно скомпилированный SASS и обслуживать его. Наконец, вам нужно позвонить в свою задачу с заданием по умолчанию.

Также вы можете посмотреть здесь https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass для другого примера Browsersync + Gulp + SASS.