gulp - 代理 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

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

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

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

Answer 2

//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 3

您需要使用代理 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

Answer 4

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

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

Answer 5

我认为它按预期工作。

代理现有的虚拟主机。BrowserSync 将使用代理 URL 包装您的虚拟主机以查看您的站点。

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