Proxy 使用原始URL（而不是代理）与浏览器同步

最近从Grunt.js切换到Gulp.js，因为有很多人告诉我它有多好、多快（这是真的！）。我已经添加到我的Gulpfile.js中，使得在多个设备上进行测试更加容易。它的工作原理很好，安装也很简单。在上下文中，我用95%的工作时间开发WordPress站点，并在Apache虚拟主机上运行它们，启用多站点，并为每个客户端设置了许多本地子域，例如site1.domain.dev、site2.domain.dev等。这非常有效，我已经这样做了几年了。但是，由于BrowserSync需要为我的站点创建一个代理，以便能够同步和注入CSS，因此当前通过BrowserSync运行的站点被路由到

http://localhost:3000

。这很好，我理解为什么需要这样做，但它会让WordPress有点混乱（因为URL不一样等等），加上我是一个大的TypeKit/Cloud字体用户，这意味着因为站点被路由到localhost，所以没有加载任何字体。当然，我可以添加

http://localhost:3000

添加到TypeKit上每个站点的域列表中，但这感觉像是一种解决方法，我想知道是否有更好的方法

我在Gulpfile.js的BrowserSync部分添加了：

gulp.task('serve', function() {
    browserSync({
        proxy: 'site1.domain.dev'
    });

    gulp.watch('assets/styles/source/**/*.scss', ['styles']);
    gulp.watch('*.php', reload);
    gulp.watch('assets/js/source/*.js', ['scripts']);
    gulp.watch('assets/js/plugins/**/*.js', ['plugins']);
});

所以我的问题是，BrowserSync是否可以直接转到我的URL（），而不是通过

http://localhost:3000

？作为额外的好处，如果可以从BrowserSync代理属性中删除该域，那将是非常棒的，因为我使用自动化脚本在我的WP Multisite安装上设置了一个新站点，并且不想每次设置新站点时都要编辑我的gulpfile

---

谢谢你的帮助！：）

问得好-我也在WordPress上，有一个类似的问题。BrowserSync站点上的文档并没有真正说明这一点，但我在运行于的BrowserSync UI的概览页面上找到了解决问题的方法。运行BrowserSync时，如果没有模式标志，如

--proxy

，则会出现此消息

如果在结束标记之前将此代码段粘贴到某个位置

<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.6.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

---

它将在其正常地址刷新您的站点。我将把代码片段包装在一个条件中，这样它只会包含在我的开发环境中——将来也许有人可以编写一个LiveReload风格的Chrome扩展来完成这项工作。不确定这是否适合Gulp的具体情况，但它可以与命令行一起使用。

检查它是否对您有帮助。我的gulpfile.js如下所示：

browserSync.init({
  proxy: 'http://myproject.dev/',
  host: 'myproject.dev',
  open: 'external'
});

gulp.task（'browser-sync'，函数（）{
浏览器同步({
logPrefix:'您的项目'，
主机：“site1.domain.dev”，
港口：3060，
开：错，
通知：错误，
鬼：错，
//使用项目的文件更改此属性
//您希望在更改时刷新页面。
档案：[
“public/css/**.min.css”，
“public/js/**.min.js”，
“app/***.php”，
'index.php'，
“.htaccess”
]
});
});

运行Gulp后，控制台将显示一段代码，您需要将其放在HTML的

前面。浏览器同步客户端的版本和您使用的端口可能不同。注意：在代码中插入代码段后，消息仍将显示。从BrowserSync的1.5.2版开始，在配置中使用

logSnippet:false

[Your Project] Copy the following snippet into your website, just before the closing </body> tag
<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

[Your Project] Access URLs:
----------------------------------
UI: http://localhost:3060
----------------------------------
UI External: http://site1.domain.dev:3060
----------------------------------
[Your Project] Watching files...

使用我遵循前面提到的解决方案，但在从浏览器同步进行轮询时，我不断得到一个

net:：ERR\u CONNECTION\u拒绝

，以解决此问题，我执行了以下操作：

gulpfile.js

const gulp = require("gulp");
const browserSync = require("browser-sync").create();

gulp.task("serve", () => {
    browserSync.init({
        socket: {
            domain: "localhost:3000"
        }
    });

    gulp.watch("**/*.php").on("change", browserSync.reload);
});

在终端上运行

gulp-serve

将记录一个片段，从该片段中获取浏览器同步客户端的版本，并将其替换为：

functions.php

<?php

add_action( 'wp_footer', function () { ?>
    <script type='text/javascript' id="__bs_script__">//<![CDATA[
        document.write("<script async src='http://localhost:3000/browser-sync/browser-sync-client.X.X.X.js'><\/script>");
    //]]></script>
<?php }, 999);

?>

---

对我来说，它通过指定

host

然后

open:

'external'
来工作，如下所示：

browserSync.init({
  proxy: 'http://myproject.dev/',
  host: 'myproject.dev',
  open: 'external'
});

以下是对我有效的方法，因为当我部署应用程序时，它需要使用
0.0.0.0:5000
，监听所有地址，就像Heroku一样。我使用dokku和开源选项来实现类似Heroku的PaaS

gulp.task('serve', () => {
  browserSync.init({
    port: process.env.PORT || 5000,
    server: { baseDir: root }, // you may not need this
    domain: '0.0.0.0'
 });
});

当我运行
gulp
任务时，它仍然在
localhost:5000
上打开，但由于我通常只需要gulp用于开发而不用于生产，这对我来说很好。
我无法回答您的粗体问题，但对于TypeKit部分，将选项
xip:true
添加到浏览器同步选项，并将
*.xip.io
添加到TypeKit域。见和。作为其他解决方案，可以使用Nginx或其他类似工具，请参阅。我建议尝试插入该脚本，但当我运行“浏览器同步启动”时，它会告诉我添加该脚本。任何建议都将不胜感激。谢谢-这对我来说非常有效@TylerFlueger您可以忽略该消息来添加脚本。现在我只需要记住在部署之前把它拿出来！非常好的解决方案！不为我工作。。。使用：browserSync.init（{proxy:'localhost/mysite'，host:'localhost'，open:'external'}）；仍然有3000人出现在address@Selrond您可以尝试使用open:“local”。这对我来说很有用（我在一个乱七八糟的环境中做开发）对我来说很完美！将
代理
和
主机
设置为相同的url，它就像一个符咒！我在
myproject.dev:3000
获得服务器。这大概是因为正在运行的Apache实例已经在使用端口80。
gulp.task('serve', () => {
  browserSync.init({
    port: process.env.PORT || 5000,
    server: { baseDir: root }, // you may not need this
    domain: '0.0.0.0'
 });
});