BrowserSync 代理卡住加载

Question

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

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

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

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

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

我希望这可以帮助别人！

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 中指定的 URL。
• 我还建议您使用扩展程序，即使它只是用于组织文件系统、虚拟主机设置和/或 WAMP 列表等。这些天在 chrome 中使用 .dev is useless over http，而 .local 与多播 DNS 服务混淆.我使用.mere，您可以使用.pix ;) - 您最安全、最面向未来的赌注是按照RFC 6761 使用.test

Answer 3

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

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

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 项目，一切正常

Answer 4

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

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

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

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