47

最近从 Grunt.js 切换到 Gulp.js，因为很多人告诉我它有多好和多快（这是真的！）。我已将BrowserSync添加到我的 Gulpfile.js 中，从而更容易在多个设备上进行测试。它工作得很好，而且设置简单。就上下文而言，我用 95% 的工作时间开发 WordPress 站点，并在启用多站点的 Apache 虚拟主机上运行它们，并为每个客户端设置许多本地子域，例如 site1.domain.dev、site2 .domain.dev 等。这很好用，我已经这样做了几年了。但是，因为 BrowserSync 需要为我的站点创建一个代理以便它能够同步和注入 CSS，所以当前通过 BrowserSync 运行的站点被路由到http://localhost:3000. 这很好，我理解它为什么需要发生，但它与 WordPress 有点混淆（因为 URL 不一样等），而且我是一个大的 TypeKit/Cloud 字体用户，这意味着因为该网站是被路由到本地主机，没有加载任何字体。当然，我可以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://site1.domain.dev ) 而不是路由它http://localhost:3000？作为额外的奖励，如果可以从 BrowserSync 代理属性中删除域，那就太棒了，因为我使用自动化脚本在我的 WP Multisite 安装上设置一个新站点，并且真的不想编辑我的 gulpfile每次我建立一个新网站。

谢谢您的帮助！:)

4

5 回答 5

29

对我来说，它通过指定hostand then起作用open: 'external'，如下所示：

browserSync.init({
  proxy: 'http://myproject.dev/',
  host: 'myproject.dev',
  open: 'external'
});
于 2016-06-16T11:16:49.827 回答
18

检查它是否会帮助你。我的 gulpfile.js 看起来像这样：

gulp.task('browser-sync', function () {
  browserSync({
    logPrefix: 'Your Project',
    host: 'site1.domain.dev',
    port: 3060,
    open: false,
    notify: false,
    ghost: false,

    // Change this property with files of your project
    // that you want to refresh the page on changes.
    files: [
      'public/css/**.min.css',
      'public/js/**.min.js',
      'app/**/*.php',
      'index.php',
      '.htaccess'
    ]
  });
});

运行 Gulp 后，控制台将显示一段代码，您需要将其放入 HTML 中的</body>. browser-sync-client 的版本和您使用的端口可能不同。注意：在代码中插入代码段后，该消息仍会出现。从 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...

在文件中插入生成的代码段后，保存文件并在浏览器中打开地址http://site1.domain.dev ，不带端口。如果一切正确，该站点将更新从browserSync.files.

您可以添加验证以仅在开发环境中包含此代码段。例如，我在我的项目中使用 PHP 和 CodeIgniter，因此，为了仅包含在开发环境中，我这样做：

<?php
if (ENVIRONMENT === 'development') {
    $browserSync = rtrim(base_url(), '/') . ':3060/';
    $fileHeaders = @get_headers($browserSync);

    if ($fileHeaders) { ?>
        <script id="__bs_script__">
            document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname));
        </script>
    <?php }
} ?>
于 2015-08-16T16:00:47.510 回答
12

好问题 - 我也在使用 WordPress 并且遇到了类似的问题。BrowserSync 站点上的文档并没有真正说明这一点，但我在运行于http://localhost:3001/的 BrowserSync UI 的 Overview 页面上遇到了我的问题的解决方案。当您运行 BrowserSync 而没有像--proxy.

如果您将此代码段粘贴到结束</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>

并在没有标志的情况下运行 BrowserSync --proxy，例如

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

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

于 2015-04-13T14:08:01.980 回答
2

使用Varying-Vagrant-Vagrants我遵循已经提到的解决方案，但是net::ERR_CONNECTION_REFUSED在从 Browser Sync 轮询时我一直得到一个，为了解决我做了以下事情：

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将记录一个片段，从该片段中获取 browser-sync-client 的版本并将其替换为：

函数.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 文件更改时让 Browser Sync 重新加载您的站点。

如果您想摆脱 Browser Sync 记录的片段：

browserSync.init({
    logSnippet: false,
    socket: {
        domain: "localhost:3000"
    }
});
于 2016-03-06T02:36:19.027 回答
1

Here's what worked for me, because when I deploy my app it needs to listen on all addresses by using 0.0.0.0:5000 - just like Heroku does. I use dokku, and open source option for a Heroku-like PaaS.

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

It still opens on localhost:5000 when I run the gulp task, but as I usually only need gulp for development and not production this has been working fine for me.

于 2016-12-25T07:18:40.100 回答