代理 URL 无法使用 BrowserSync Gulp 任务

Question

有人能告诉我为什么我的代理 URL 不能与 BrowserSync 和 Gulp 一起工作吗？相反，它只是继续使用 http://localhost:3000 作为开发 URL.

gulp.task('watch', ['bs'], function() {
  gulp.watch('scss/*.scss', ['scss', browserSync.reload]);
});

gulp.task('bs', function() {
    browserSync.init(['css/style1.css', 'css/style2.css'], {
      proxy: 'dev.site.com'
    });
});

gulp.task('default', ['scss', 'watch']);

Answer 1

我认为它按预期工作。

Proxy an EXISTING vhost. BrowserSync will wrap your vhost with a proxy URL to view your site.

http://www.browsersync.io/docs/options/#option-proxy

Answer 2

我遇到了同样的问题，并执行了以下操作以阻止浏览器同步使用默认 adress/port：

gulp.task('bs', function () {
    browserSync.init(null, {
        proxy: 'localhost:8080', // 'dev.site.com' in your example
        port: 5000
    });
});

这对我有用，将 browser-scyn 地址更改为 localhost:5000

Answer 3

当我在类似情况下遇到麻烦时，为了解决这个问题，我必须包括端口选项（@maximilian 在他的回答中提到），并且还需要 files 选项。

gulp.task('bs', function() {
    browserSync.init({
        proxy: 'dev.site.com',
        port: 4040,
        files: ['*.html', '**/*.css', '**.*.js']
    });
});

Answer 4

//Finally what worked for me:

gulp.task("serve", () => {
  browserSync.init(null, {
    proxy: "127.0.0.1:8000/",
    open: true,
  });
  gulp.watch(["src/templates/**/**/*.html"], gulp.series("html"));
});

gulp.task("default", gulp.series("html", "serve"));

Answer 5

您需要使用代理末端的端口URL。默认值为 3000，但您可以在配置中指定一个。如果您不在 url 末尾添加端口，BrowserSync 将不会重新加载页面。这对我有用。

function server() {
  browserSync.init({
    proxy: 'dev.site.com', //alias
    port: 8080, //<-- changed default port (default:3000);
    open: false //<-- set false to prevent opening browser
  });
}

因此在您的浏览器中您将访问：http://dev.site.com:8080

代理 URL 无法使用 BrowserSync Gulp 任务

Proxy URL not working with BrowserSync Gulp task

gulp

gulp-watch

browser-sync