Gulp BrowserSync showing “reloading browsers” in Terminal, but not reloading the actual browser.

问题

I'm having an issue where my tasks are running as desired and BrowserSync seems to be working, but the actual browser isn't reloading. I'm getting the right messages in my Terminal to suggest everything is working as planned.

I'm using MAMP for my local server which is serving a Wordpress build. I'm using Chrome v65 on a Mac.

My gulpfile is below with a screenshot of my Terminal. Any ideas what might be causing this issue?

// ================================================================================================
// PLUGINS
// ================================================================================================

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var svgmin = require('gulp-svgmin');
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');

// ================================================================================================
// DIRECTORIES
// ================================================================================================

var sassInput = 'src/scss/*.scss';
var sassModulesInput = 'src/scss/modules/*.scss';
var sassUiInput = 'src/scss/ui/*.scss';
var jsInput = 'src/js/**/*.js';
var svgInput = 'src/svg/**/*.svg';
var imgInput = 'src/img/*';

var buildDir = 'www/wp-content/themes/my-theme/'

// ================================================================================================
// SASS
// ================================================================================================

var autoprefixerOptions = {
    browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

gulp.task('sass', function () {
    return gulp
    .src(sassInput)

    .pipe(plumber({ errorHandler: function(err) {
        notify.onError({
            title: 'Gulp error in ' + err.plugin,
            message: err.toString()
        })(err);
        gutil.beep();
    }}))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(buildDir))
    .pipe(notify('CSS compiled'));
});

// ================================================================================================
// JAVASCRIPT
// ================================================================================================

gulp.task('concat', function() {
    return gulp
    .src(jsInput)

    .pipe(plumber({ errorHandler: function(err) {
        notify.onError({
            title: 'Gulp error in ' + err.plugin,
            message:  err.toString()
        })(err);
        gutil.beep();
    }}))
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))
    .pipe(gulp.dest(buildDir))
    .pipe(uglify())
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(buildDir))
    .pipe(notify('JS concatenated and minified'));
});

// ================================================================================================
// SVG
// ================================================================================================

gulp.task('svgmin', function () {
    return gulp
    .src(svgInput)

    .pipe(svgmin())
    .pipe(gulp.dest(buildDir + '/svg/'));
});

// ================================================================================================
// IMAGES
// ================================================================================================

gulp.task('imgmin', function () {
    return gulp
    .src(imgInput)

    .pipe(imagemin())
    .pipe(gulp.dest(buildDir + '/img/'))
});

// ================================================================================================
// RUN TASKS
// ================================================================================================

// INDIVIDUAL BROWSER RELOAD TASKS

gulp.task('css-watch', ['sass'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('js-watch', ['concat'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('svg-watch', ['svgmin'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('img-watch', ['imgmin'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('default', ['sass', 'concat', 'svgmin', 'imgmin'], function () {

    var files = [
        'www/wp-content/themes/my-theme/**/*.php'
    ];

    browserSync.init(files, {
        proxy: 'http://my-theme:8080/'
    });

    gulp.watch(sassInput, ['css-watch']);
    gulp.watch(sassModulesInput, ['css-watch']);
    gulp.watch(sassUiInput, ['css-watch']);
    gulp.watch(jsInput, ['js-watch']);
    gulp.watch(svgInput, ['svg-watch']);
    gulp.watch(imgInput, ['img-watch']);
});

Any help on this matter would be amazing!

回答1:

Your usage of browser-sync options is incorrect. They should all be within one object. So something like:

    var files = [
        'www/wp-content/themes/my-theme/**/*.php'
    ];

    browserSync.init({
        files: files,
        proxy: 'http://my-theme:8080/'
    });

See init takes an object and init options:

Create a single object and pass it as the first argument (for GulpJS and normal API usage).

来源：https://stackoverflow.com/questions/49488500/gulp-browsersync-showing-reloading-browsers-in-terminal-but-not-reloading-the