Question

最近从Grunt.js切换到Gulp.js，因为有多个人告诉我它有多好和多快（这是真的！）。我已将BrowserSync添加到我的Gulpfile.js中，这样可以更轻松地在多个设备上进行测试。它工作得很好，设置简单。对于上下文，我在95％的工作时间内开发WordPress站点，并在启用了Multisite的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可以直接转到我的网址（http://site1.domain.dev）而不是通过http://localhost:3000 进行路由吗？作为一个额外的好处，如果可以从BrowserSync代理属性中删除域，那将是非常棒的，因为我使用自动化脚本在我的WP Multisite安装上设置新站点，并且真的不想编辑每当我建立一个新网站时，我的gulpfile。

感谢您的帮助！：）

Answer 1

对我来说，它通过指定host然后open: 'external'来实现，如下所示：

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

Answer 2

好问题 - 我也在使用WordPress并遇到类似问题。 BrowserSync网站上的文档并没有真正说清楚，但我在http://localhost:3001/运行的BrowserSync UI的Overview页面上找到了我的问题的解决方案。当您运行没有--proxy等模式标志的BrowserSync时，会出现此消息。

如果您在结束</body>代码

之前将此代码段粘贴到某个位置

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

并运行不带--proxy标志的BrowserSync，例如

browser-sync start  --files "css/*.css"

它会以正常地址刷新您的网站。我打算将片段包装在一个条件中，以便它只包含在我的开发环境中 - 将来也许有些人可以写一个LiveReload风格的Chrome扩展来完成这项工作。不确定这是否适合您使用Gulp的特定情况，但它适用于命令行。

Answer 3

使用Varying-Vagrant-Vagrants我按照已经提到的解决方案，但在从浏览器同步中进行轮询时，我一直收到net::ERR_CONNECTION_REFUSED，以解决我执行以下操作的问题：

<强> 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);

?>

请注意，脚本的主机名与套接字域localhost:3000相同，此时您应该能够从您的域名输入，并且当任何php文件存在时，浏览器同步会重新加载您的站点改变。

如果您想摆脱浏览器同步记录的片段：

browserSync.init({
    logSnippet: false,
    socket: {
        domain: "localhost:3000"
    }
});

Answer 4

这对我有用，因为当我部署我的应用时，它需要使用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'
 });
});

当我运行localhost:5000任务时，它仍会在gulp上打开，但由于我通常只需要gulp进行开发而不是生产，所以这对我来说一直很好。

使用原始URL而不是代理，使用浏览器同步

4 个答案: