Gulp BrowserSync显示＆＃34;重新加载浏览器＆＃34;在终端，但不重新加载实际的浏览器。

Question

我遇到的问题是我的任务正在按需运行，而BrowserSync似乎正在运行，但实际的浏览器并没有重新加载。我在终端中收到正确的消息，建议一切按计划进行。

我正在为我的本地服务器使用MAMP，该服务器正在提供Wordpress构建。我在Mac上使用Chrome v65。

我的gulpfile下面是我终端的截图。可能导致此问题的任何想法？

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

对此事的任何帮助都会很棒！

Answer 1

您对浏览器同步选项的使用不正确。它们都应该在一个对象中。如下所示：

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

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

请参阅init takes an object和init options：

  

创建一个对象并将其作为第一个参数传递（对于GulpJS   和普通的API使用）。