Verwendung der ursprünglichen URL, nicht Proxy, mit Browser-Sync

Question

Kürzlich wechselte von Grunt.js zu Gulp.js als mehrere Leute mir sagten, wie viel besser und schneller es wa (es ist wahr!). Ich habe in meine Datei Gulpfile.js aufgenommen, um das Testen auf mehreren Geräten zu vereinfachen. Es funktioniert großartig und war einfach einzurichten. Für den Kontext entwickle ich WordPress-Websites für 95% meiner Arbeitszeit und führe sie auf einem Apache Virtual Host mit aktivierter Multisite aus und habe viele lokale Subdomains für jeden Client eingerichtet, zB site1.domain.dev, site2 .domain.dev usw. Das funktioniert großartig, und ich mache das schon seit ein paar Jahren so. Da BrowserSync jedoch einen Proxy für meine Site erstellen muss, um das CSS zu synchronisieren und zu injizieren, 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 verwirrt etwas mit WordPress (wie die URL ist nicht die gleiche usw.), plus ich bin ein großer TypKit/Cloud-Schriftarten Benutzer, was bedeutet, dass, weil die Website ist Wenn Sie zu localhost weitergeleitet werden, wird keine der Schriftarten geladen. Natürlich könnte ich einfach http://localhost:3000 zu der Liste der Domains für jede Site auf TypeKit hinzufügen, aber das fühlt sich wie eine Art Workaround an und hat sich gefragt, ob es einen besseren Weg gibt, es zu tun.

Ich habe in dem 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']); 
}); 

Also meine Frage ist, wäre es möglich, für BrowserSync direkt an meine URL zu gehen (http://site1.domain.dev), anstatt es zu Routing obwohl http://localhost:3000? Als zusätzlichen Bonus wäre es großartig, wenn die Domain aus der BrowserSync-Proxy-Eigenschaft entfernt werden könnte, da ich ein Automatisierungsskript verwende, um eine neue Site auf meiner WP Multisite-Installation einzurichten und meine gulp-Datei nicht wirklich bearbeiten zu müssen jedes Mal, wenn ich eine neue Website aufstelle.

Danke für die Hilfe! :)

Answer 1

Gute Frage - Ich bin auch auf WordPress und hatte ein ähnliches Problem. Die Dokumentation auf der BrowserSync-Site macht das nicht wirklich deutlich, aber ich habe auf der Seite "Übersicht" der BrowserSync-Benutzeroberfläche, die unter http://localhost:3001/ ausgeführt wird, eine Lösung für mein Problem gefunden. Die Nachricht wird angezeigt, wenn Sie BrowserSync ohne ein Modus-Flag wie --proxy ausführen.

Wenn Sie diese Schnipsel irgendwo einzufügen, bevor Sie Ihren Abschluss </body> Tag

<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 laufen BrowserSync ohne --proxy Flagge, zum Beispiel

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

Es wird Ihre Website unter seiner normalen Adresse aktualisieren. Ich werde das Snippet so verpacken, dass es nur noch in meinen Entwicklungsumgebungen enthalten ist - in Zukunft könnte vielleicht eine nette Person eine Chrome-Erweiterung im Stil von LiveReload schreiben, um diese Aufgabe zu erledigen. Nicht sicher, ob dies zu deinem speziellen Fall mit Gulp passt, aber es funktioniert mit der Befehlszeile.

Answer 2

Überprüfen Sie, ob es Ihnen hilft. Mein 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... 

Nachdem Sie Gulp ausführen, wird die Konsole ein Code-Snippet angezeigt, die Sie benötigen, bevor der </body> in Ihrem HTML zu setzen. Die Version des Browser-Sync-Clients und der von Ihnen verwendete Port können sich unterscheiden. Hinweis: Nachdem Sie das Snippet in Ihren Code eingefügt haben, wird die Nachricht weiterhin angezeigt. Ab Version 1.5.2 von BrowserSync, you can disable the 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 den erzeugten Code-Schnipsel in Ihrer Datei einfügen, speichern Sie die Datei und die Adresse http://site1.domain.dev ohne Port in Ihrem Browser öffnen. Wenn alles korrekt ist, aktualisiert die Site die Änderungen von browserSync.files.

Sie können eine Überprüfung hinzufügen, um dieses Codefragment nur in Entwicklungsumgebungen einzubeziehen. Zum Beispiel habe ich PHP und CodeIgniter in meinen Projekten mit, so, nur in Entwicklungsumgebungen umfassen, ich dies tun:

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

Answer 3

Varying-Vagrant-Vagrants Mit verfolge ich die Lösungen bereits erwähnt, aber ich hielt eine net::ERR_CONNECTION_REFUSED bekommen, wenn Polling von Browser Sync, zu lösen, dass ich das folgende tat:

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

Lauf gulp serve auf Ihrem Terminal ein sni einloggen PPET, von diesem Schnipsel nehmen Sie die Version des Browsers-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 Hostname des Skripts ist das gleiche wie die Buchse Domain localhost:3000 und an diesem Punkt sollten Sie in der Lage sein, von Ihrem Domain-Namen einzugeben und Browser Sync Ihre Website neu laden, wenn eine PHP-Datei geändert wird.

---

Wenn Sie möchten, dass Browser Sync-Protokolle des Snippets loszuwerden:

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

Answer 4

Für mich war es von host und dann open:'external', wie diese Angabe:

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

Answer 5

Hier ist, was für mich funktionierte, denn wenn ich meine App ausliege, muss sie alle Adressen mit 0.0.0.0:5000 abhören - genau wie Heroku. Ich benutze Dokku und Open-Source-Option für eine Heroku-ähnliche 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 öffnet sich nach wie vor auf localhost:5000, wenn ich die gulp Aufgabe laufen, aber als ich in der Regel nur für die Entwicklung schlucken müssen und nicht die Produktion in diesem gearbeitet hat für mich.