À l'aide de l'URL d'origine, pas de proxy, avec un navigateur de synchronisation

Vérifier si cela vous aide. Mon gulpfile.js ressemble à ceci:

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'
    ]
  });
});

Après l'exécution de Gulp, la console affiche un extrait de code que vous devez mettre dans votre code HTML avant le </body>. La version du navigateur de synchronisation client et le port que vous utilisez peuvent être différentes. Remarque: après l'insertion de l'extrait de code dans votre code, le message s'affiche toujours. À partir de la version 1.5.2 de BrowserSync, vous pouvez désactiver l'extrait de journal avec logSnippet: false dans votre configuration.

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

Après l'insertion de l'généré extrait de code dans votre fichier, enregistrer le fichier et ouvrez l'adresse http://site1.domain.dev sans port dans votre navigateur. Si tout est correct, le site sera mise à jour sur les changements de browserSync.files.

Vous pouvez ajouter une vérification de n'inclure que cet extrait dans des environnements de développement. Par exemple, j'utilise PHP et CodeIgniter dans mes projets, afin d'inclure seulement dans les environnements de développement, je fais ceci:

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

À l'aide de Divers-Vagabond-Les Vagabonds j'ai suivi les solutions déjà mentionné, mais j'ai continué à obtenir une net::ERR_CONNECTION_REFUSED lors de l'interrogation de la Synchronisation de Navigateur, pour le résoudre j'ai fait la suivante:

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

De course gulp serve sur votre terminal journal d'un extrait, à partir de ce fragment de prendre la version du navigateur-sync-client et de la remplacer dans:

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

?>

Noter que le nom d'hôte du script est le même que le socket de domaine localhost:3000 et que, à ce stade, vous devriez être en mesure de saisir à partir de votre nom de domaine et que le Navigateur de Synchronisation rechargement de votre site lorsque l'un fichier php est changé.

---

Si vous voulez vous débarrasser de l'extrait de la Synchronisation de Navigateur journaux:

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