BrowserSync代理卡住加载

Question

当我运行Gulp时，UI页面可以在http://localhost:3001上运行，但在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

这个问题也使我发疯，因为最近我的代理也停止工作。我试图思考自己所做的更改-最终我意识到我将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列表等。最近，.dev is useless over http用Chrome出现，.local混乱与多播DNS服务。我使用.mere，您可以使用.pix;）-您最安全，最有前途的赌注是按照RFC 6761
使用.test

Answer 3

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

问题是Browser Sync软件包需要更新，所以我做了以下

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