显示“重新加载浏览器”的Gulp BrowserSync在终端中，但不能重新加载实际的浏览器。 [英] Gulp BrowserSync showing "reloading browsers" in Terminal, but not reloading the actual browser.

问题描述

我遇到了一个问题，我的任务按需运行，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'] 
}; 
 $ b gulp.task（'sass'，function（）{
 return gulp 
 .src（sassInput）
 
 .pipe（plumber（{errorHandler ：函数（err）{
 notify.onError（{
标题：'gulp错误'+ 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） 
 
 bipe（plumber（{errorHandler：function（err）{
 notify.onError（{
 title：'gulp error in'+ err.plugin，
 message：err.toString（）
}）（err）; 
 gutil.beep（）; 
}}））
 .pipe（sourcemaps.init（））
 .pipe（'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 /'））; 
}）; 
 
 // ======================================== ================================================== ====== 
 //图片
 // =============================== ================================================== =============== 
 
 gulp.task（'imgmin'，function（）{
 return gulp 
 .src（imgInput） 
 
 .pipe（imagemin（））
 .pipe（gulp.dest（buildDir +'/ img /'））
}）; 
 
 // ======================================== ================================================== ====== 
 // RUN TASKS 
 // ============================== ================================================== ================ 
 
 //个人浏览器重新加载任务
 
 gulp.task（'css-watch'，['' sass']，function（done）{
 browserSync.reload（）; 
 done（）; 
}）; 
 $ b gulp.task（'js-watch'，['concat']，function（done）{
 browserSync.reload（）; 
 done（）; 
}）; 
 $ b gulp.task（'svg-watch'，['svgmin']，function（done）{
 browserSync.reload（）; 
 done（）; 
}）; 
 $ b 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']）; 
}）; 
  

在这件事情上的任何帮助都将是惊人的！

解决方案

您对浏览器同步选项的使用不正确。他们都应该在一个对象内。例如：

  var files = [
'www / wp-content / themes / my-theme / * * / *。php'
]; 
 
 browserSync.init（{
 files：files，
 proxy：'http：// my-theme：8080 /'
}）; 
  

请参阅 init获取一个对象和 init选项：

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

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!

解决方案

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).

这篇关于显示“重新加载浏览器”的Gulp BrowserSync在终端中，但不能重新加载实际的浏览器。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！