wake-up-neo.net

Verwenden Sie die ursprüngliche URL, nicht den Proxy, mit Browsersynchronisierung

Kürzlich wurde von Grunt.js zu Gulp.js gewechselt, als mir mehrere Leute sagten, wie viel besser und schneller es war (es ist wahr!). Ich habe meiner Gulpfile.js BrowserSync hinzugefügt, um das Testen auf mehreren Geräten zu vereinfachen. Es funktioniert super und war einfach einzurichten. Für den Kontext entwickle ich WordPress Websites für 95% meiner Arbeitszeit und führe sie auf einem virtuellen Apache-Host mit aktivierter Multisite-Funktion aus. Für jeden Client sind zahlreiche lokale Unterdomänen eingerichtet, z. B. site1 .domain.dev, site2.domain.dev usw. Das funktioniert sehr gut, und das mache ich jetzt schon seit ein paar Jahren so. Da BrowserSync jedoch einen Proxy für meine Site erstellen muss, damit das CSS synchronisiert und eingefügt werden kann, wird die Site, die derzeit über BrowserSync ausgeführt wird, an http://localhost:3000 Weitergeleitet. Das ist in Ordnung und ich verstehe, warum es passieren muss, aber es stört WordPress ein bisschen (da die URL nicht dieselbe ist usw.), und ich bin ein großer Benutzer von TypeKit/Cloud-Schriftarten, der bedeutet, dass keine der Schriftarten geladen wird, da die Site an localhost weitergeleitet wird. Natürlich könnte ich einfach http://localhost:3000 Zur Liste der Domains für jede Site in TypeKit hinzufügen, aber dies fühlt sich wie eine Art Workaround an und hat mich gefragt, ob es eine bessere Möglichkeit gibt, dies zu tun.

Ich habe im BrowserSync-Teil meiner Gulpfile.js hinzugefügt:

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

Meine Frage ist also, ob BrowserSync direkt zu meiner URL gehen kann ( http://site1.domain.dev ), anstatt sie weiterzuleiten http://localhost:3000? Als zusätzlichen Bonus wäre es fantastisch, wenn die Domain aus der BrowserSync-Proxy-Eigenschaft entfernt werden könnte, da ich mithilfe eines Automatisierungsskripts eine neue Site auf meiner WP Multisite-Installation einrichte und nicht wirklich möchte muss mein Gulpfile jedes Mal bearbeiten, wenn ich eine neue Site einrichte.

Danke für die Hilfe! :)

42
Tom Oakley

Bei mir hat es funktioniert, indem Host und dann open:'external', so was:

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

Prüfen Sie, ob es Ihnen hilft. Meine gulpfile.js sieht so 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'
    ]
  });
});

Nachdem Sie Gulp ausgeführt haben, zeigt die Konsole einen Codeausschnitt an, den Sie vor dem </body> In Ihren HTML-Code einfügen müssen. Die Version des Browser-Sync-Clients und der von Ihnen verwendete Port können unterschiedlich sein. Hinweis: Nachdem Sie das Snippet in Ihren Code eingefügt haben, wird die Meldung weiterhin angezeigt. Ab Version 1.5.2 von BrowserSync Sie können das Protokoll-Snippet deaktivieren 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 das generierte Snippet in Ihre Datei eingefügt haben, speichern Sie die Datei und öffnen Sie die Adresse http://site1.domain.dev ohne Port in Ihrem Browser. Wenn alles korrekt ist, wird die Site bei Änderungen von browserSync.files Aktualisiert.

Sie können eine Überprüfung hinzufügen, um dieses Snippet nur in Entwicklungsumgebungen einzuschließen. Zum Beispiel benutze ich PHP und CodeIgniter in meinen Projekten, um nur in Entwicklungsumgebungen einzubeziehen:

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

Gute Frage - ich bin auch auf WordPress und hatte ein ähnliches Problem. Die Dokumentation auf der BrowserSync-Site macht dies nicht wirklich klar, aber ich bin auf eine Lösung für mein Problem in der Übersicht gestoßen Seite der BrowserSync-Benutzeroberfläche, die unter http: // localhost: 3001 / ausgeführt wird. Die Meldung wird angezeigt, wenn Sie BrowserSync ohne ein Modusflag wie --proxy ausführen.

Wenn Sie dieses Snippet irgendwo vor dem schließenden </body> - Tag einfügen

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

und führen Sie BrowserSync beispielsweise ohne das Flag --proxy aus

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

Ihre Website wird an der normalen Adresse aktualisiert. Ich werde das Snippet in einem Zustand verpacken, in dem es nur in meinen Entwicklungsumgebungen enthalten ist - in Zukunft könnte vielleicht eine freundliche Person eine LiveReload-artige Chrome) Erweiterung schreiben, um den Job zu erledigen. Ich bin nicht sicher, ob dies für Ihren speziellen Fall mit Gulp passt, aber es funktioniert mit der Befehlszeile.

11
And Finally

Mit Varying-Vagrant-Vagrants folge ich den bereits erwähnten Lösungen, erhalte aber beim Abrufen von Browser Sync immer wieder einen net::ERR_CONNECTION_REFUSED, Um zu lösen, dass ich Folgendes getan habe:

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

Wenn Sie gulp serve Auf Ihrem Terminal ausführen, wird ein Snippet protokolliert. Nehmen Sie von diesem Snippet die Version des Browser-Sync-Clients und ersetzen Sie sie 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 Hostname des Skripts mit der Socket-Domain localhost:3000 Identisch ist und dass Sie zu diesem Zeitpunkt in der Lage sein sollten, Ihren Domainnamen einzugeben und Browser Sync Ihre Site neu laden zu lassen, wenn eine PHP-Datei geändert wird.


Wenn Sie das Snippet entfernen möchten, das von Browser Sync protokolliert wird:

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

Hier ist, was für mich funktioniert hat, denn wenn ich meine App bereitstelle, muss sie alle Adressen mit 0.0.0.0:5000 Abhören - genau wie Heroku. Ich benutze Dokku und Open Source Option für ein Heroku-ähnliches PaaS.

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

Es wird immer noch auf localhost:5000 Geöffnet, wenn ich die Task gulp ausführe, aber da ich normalerweise nur Schluck für die Entwicklung und nicht für die Produktion benötige, hat dies für mich gut funktioniert.

1
Seth Bergman