Verwenden Sie die ursprüngliche URL, nicht Proxy, mit Browser-Sync

Prüfen Sie, ob es Ihnen helfen wird. Meine gulpfile.js sieht wie folgt aus:

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

//Other tasks: watch, styles, scripts...

Nach der Ausführung von Gulp, die Konsole zeigt ein code-snippet, das Sie benötigen, um in Ihre HTML-bevor die </body>. Die version der browser-sync-client und der port, den Sie verwenden, unterschiedlich sein können. Hinweis: nach dem einfügen des snippets im code, die Meldung wird immer noch angezeigt. Ab version 1.5.2 von BrowserSync, Sie können deaktivieren Sie die log-snippet mit logSnippet: false in Ihrer Konfiguration.

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

Nachdem Sie legen Sie die generierten snippet in Ihre Datei, speichern Sie die Datei und öffnen Sie die Adresse http://site1.domain.dev ohne den port in Ihren browser. Wenn alles korrekt ist, wird die Website aktualisieren, die auf Veränderungen von browserSync.files.

Können Sie eine überprüfung, um nur dieses snippet in Entwicklungsumgebungen. Zum Beispiel habe ich mit Hilfe von PHP und CodeIgniter in meinen Projekten so, nur in Entwicklungsumgebungen, Tue ich dies:

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

InformationsquelleAutor der Antwort thiagobraga

Mit Variation-Landstreicher-Landstreicher ich befolgen Sie die Lösungen, die bereits erwähnt, aber ich hielt immer einen net::ERR_CONNECTION_REFUSED bei der Abfrage von Browser-Sync, um das zu beheben habe ich Folgendes:

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

Läuft gulp serve auf Ihrem terminal anmelden, ein snippet von diesem snippet nehmen, die version der browser-sync-client und ersetzen Sie es in:

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

?>

Beachten Sie, dass der host-name des Skripts ist die gleiche wie die socket-domain localhost:3000 und dass an diesem Punkt sollten Sie in der Lage, Ihr domain-name und die Browser-Sync Neuladen Ihrer Website, wenn jede php-Datei geändert wird.

Wenn Sie möchten, um loszuwerden, das snippet, das Browser-Sync-Protokolle:

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

InformationsquelleAutor der Antwort a.guerrero.g87