BrowserSync 代理卡住加载

Question

当我运行 Gulp UI 页面在 http://localhost:3001, but on http://localhost:3000 上工作时，浏览器提供一个空白页面，该页面卡在加载中，没有控制台错误。

我在 Windows 10、Gulp 版本 3.9.1、BrowserSync 版本 2.24.4 上使用 WAMP。

这个设置直到最近都运行良好，这让我很困惑。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
});

gulp.task('compress', function () {
  gulp.src('scripts/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '-min' }))
    .pipe(gulp.dest('scripts/minified/'));
});

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

gulp.task('watch',['browserSync', 'sass', 'compress'], function(){
    gulp.watch('sass/*.scss', ['sass']);
    gulp.watch('scripts/js/*.js', ['compress']);
    gulp.watch('*.php', browserSync.reload);
    gulp.watch('*.html', browserSync.reload);
    gulp.watch('scripts/minified/*.js', browserSync.reload);
})

终端输出

[17:24:44] Using gulpfile ~\Documents\Web Design Local\host\experiments\gulpfile.js
[17:24:44] Starting 'browserSync'...
[17:24:44] Finished 'browserSync' after 9.99 ms
[17:24:44] Starting 'sass'...
[17:24:44] Starting 'compress'...
[17:24:44] Finished 'compress' after 2.2 ms
[Browsersync] 1 file changed (universal.css)
[17:24:45] Finished 'sass' after 174 ms
[17:24:45] Starting 'watch'...
[17:24:45] Finished 'watch' after 17 ms
[Browsersync] Proxying: http://experiments
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://redacted:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://redacted:3001
 --------------------------------------

看起来端口设置是否正确？这是 gulp 任务之前的运行...

之后...

Answer 1

当您在浏览器中进行实验时，它是否有效？

可能是浏览器更新，而不是 gulp

我会尝试将您的主机更改为 dev.experiments.co.uk

然后将代理更改为 dev.experiments.co.uk

Answer 2

我已经设置了 gulp + browsersync 作为测试，我认为——在一些混乱和文档阅读之后——你可以改变这个：

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

对此：

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'experiments',
        host: 'experiments',
        open: 'external'
    });
});

...它会起作用。

备注：

如果未设置，host 默认为 null。
open 是要执行的浏览器操作，默认为 true。其他选项包括不打开浏览器的 false，以及此处使用的 external 打开 host.
我还建议您使用一个扩展，即使它只是为了组织您的文件系统、虚拟主机设置 and/or WAMP 列表等。.dev is useless over http in chrome these days, and .local messes with Multicast DNS services. I use .mere, you could use .pix ;) - your safest most future-proof bet is to use .test as per RFC 6761

Answer 3

这个问题也让我抓狂，因为最近我的代理也停止工作了。我试图思考我改变了什么 - 最后我意识到我将 MalwareBytes 升级到最新版本并且它的防火墙设置弄乱了我的端口。我禁用了它，现在它可以正常工作了。

希望对大家有所帮助！

Answer 4

安装新的 windows 后，我遇到了同样的问题，浏览器在没有初始化项目的情况下继续加载。

问题是浏览器同步包需要更新，所以我做了以下操作

run the terminal as administrator 
cd into the project folder
rm -rf node_modules (if you already have the package.json file)
npm install

您可能还需要重建 node-sass 以便您可以使用以下内容

npm rebuild node-sass

然后运行 gulp 项目，一切正常

BrowserSync 代理卡住加载

BrowserSync proxy stuck loading

proxy

wamp

gulp

windows-10

browser-sync