Использование исходного URL-адреса, а не прокси-сервера, с синхронизацией браузера

Ответ 1

Для меня это сработало, указав host, а затем open: 'external', например:

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

Ответ 2

Проверьте, поможет ли это вам. Мой 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>. Версия браузера-клиента синхронизации и порт, который вы используете, могут отличаться. Примечание: после того, как вы вставите фрагмент в свой код, сообщение все равно появится. Начиная с версии 1.5.2 BrowserSync, вы можете отключить фрагмент журнала с помощью 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 }
} ?>

Ответ 3

Хороший вопрос - я тоже на WordPress и имею аналогичную проблему. Документация на сайте BrowserSync на самом деле не делает этого ясно, но я столкнулся с решением моей проблемы на странице обзора пользовательского интерфейса BrowserSync, который работает в http://localhost:3001/. Сообщение появляется при запуске 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"

Он обновит ваш сайт по его обычному адресу. Я собираюсь обернуть фрагмент в таком состоянии, чтобы он включался только в среду моего dev - в будущем, возможно, какой-то человек мог бы написать расширение Chrome в стиле LiveReload, чтобы выполнить эту работу. Не уверен, что это соответствует вашему конкретному случаю с Gulp, но он работает с командной строкой.

Ответ 4

Использование Varying-Vagrant-Vagrants Я следую уже упомянутым решениям, но я продолжал получать net::ERR_CONNECTION_REFUSED при опросе из браузера 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 на вашем терминале приведет к регистрации фрагмента, из этого фрагмента возьмет версию браузера-синхронизатора и заменит его на:

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

?>

Обратите внимание, что имя хоста script совпадает с доменом сокета localhost:3000 и что на этом этапе вы должны будете ввести свое имя домена и перезагрузить браузер, если какой-либо файл php изменилось.

Если вы хотите избавиться от фрагмента, который ведет журнал синхронизации браузера:

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

Ответ 5

Вот что сработало для меня, потому что, когда я развертываю свое приложение, ему нужно прослушивать все адреса, используя 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 для разработки, а не для создания, это отлично работает для меня.