Gulp浏览器重新加载不起作用-在SASS上使用手表

Question

I want to have a watch task that reloads the browser. Below watch works fine for sass compilation but the browser doesn't reload - thoughts?

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

I would suggest a configuration similar to:

// 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']);

Source: https://www.browsersync.io/docs/gulp

You need to initialise a Server and watch changes to your SASS and HTML. Then in your sass compile task you need to add .pipe(browserSync.stream()); after the dest command so browserSync can pick up your newly compiled SASS and serve it. Finally you need to call your serve task with your default task.

Also you can take a look here https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass for another example of Browsersync + Gulp + SASS.