web-dev-qa-db-fra.com

Utilisation de l'URL d'origine, pas du proxy, avec synchronisation du navigateur

Récemment, je suis passé de Grunt.js à Gulp.js, car plusieurs personnes m'ont dit à quel point c'était meilleur et plus rapide (c'est vrai!). J'ai ajouté BrowserSync à mon Gulpfile.js, ce qui facilite le test sur plusieurs appareils. Cela fonctionne très bien et était simple à configurer. Pour le contexte, je développe des sites WordPress pour 95% de mon temps de travail, et les exécute sur un hôte virtuel Apache, avec Multisite activé, et j'ai beaucoup de sous-domaines locaux configurés pour chaque client , par exemple site1.domain.dev, site2.domain.dev, etc. Cela fonctionne très bien, et je le fais de cette façon depuis quelques années maintenant. Cependant, parce que BrowserSync doit créer un proxy pour mon site afin qu'il puisse pour synchroniser et injecter le CSS, le site en cours d'exécution via BrowserSync est routé vers http://localhost:3000. C'est bien et je comprends pourquoi cela doit se produire, mais ça dérange avec WordPress un peu (car l'URL n'est pas la même, etc.), en plus je suis une grande police TypeKit/Cloud utilisateur, ce qui signifie que, comme le site est acheminé vers localhost, aucune des polices n'est chargée. Bien sûr, je pourrais simplement ajouter http://localhost:3000 à la liste des domaines pour chaque site sur TypeKit, mais cela ressemble à une solution de contournement et je me demandais s'il y avait une meilleure façon de le faire.

J'ai ajouté dans la partie BrowserSync de mon Gulpfile.js:

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

Donc ma question est, serait-il possible pour BrowserSync d'aller directement à mon URL ( http://site1.domain.dev ) au lieu de l'acheminer si http://localhost:3000? En prime, ce serait génial si le domaine pouvait être supprimé de la propriété proxy BrowserSync, car j'utilise un script d'automatisation pour configurer un nouveau site sur mon WP Installation multisite et ne pas '' Je veux vraiment avoir à modifier mon gulpfile chaque fois que je crée un nouveau site.

Merci pour l'aide! :)

proxylocalhostgulpbrowser-sync
42
Tom Oakley

Pour moi, cela a fonctionné en spécifiant Host puis open:'external', comme ça:

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

Vérifiez si cela vous aidera. 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 avoir exécuté Gulp, la console affichera un extrait de code que vous devez mettre dans votre code HTML avant le </body>. La version du navigateur-sync-client et le port que vous utilisez peuvent être différents. Remarque: après avoir inséré l'extrait de code dans votre code, le message apparaîtra 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 avoir inséré l'extrait généré dans votre fichier, enregistrez le fichier et ouvrez l'adresse http://site1.domain.dev sans port dans votre navigateur. Si tout est correct, le site mettra à jour les modifications de browserSync.files.

Vous pouvez ajouter une vérification pour inclure uniquement cet extrait dans les environnements de développement. Par exemple, j'utilise PHP et CodeIgniter dans mes projets, donc, pour n'inclure que 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 }
} ?>
16
thiagobraga

Bonne question - je suis sur WordPress aussi et a eu un problème similaire. La documentation sur le site BrowserSync ne le rend pas vraiment clair, mais je suis tombé sur une solution à mon problème dans l'aperçu page de l'interface utilisateur de BrowserSync qui s'exécute à http: // localhost: 3001 / . Le message s'affiche lorsque vous exécutez BrowserSync sans indicateur de mode comme --proxy.

Si vous collez cet extrait quelque part avant votre fermeture </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>

et exécutez BrowserSync sans le --proxy drapeau, par exemple

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

Il rafraîchira votre site à son adresse habituelle. Je vais envelopper l'extrait dans un état afin qu'il ne soit inclus que dans mes environnements de développement - à l'avenir, une personne aimable pourrait peut-être écrire une extension de style LiveReload Chrome extension pour faire le travail. Je ne sais pas si cela correspond à votre cas particulier avec Gulp, mais cela fonctionne avec la ligne de commande.

11
And Finally

Utilisation de Varying-Vagrant-Vagrants Je suis les solutions déjà mentionnées mais j'ai continué à obtenir un net::ERR_CONNECTION_REFUSED lors de l'interrogation depuis Browser Sync, pour résoudre ce problème, j'ai fait ce qui suit:

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

Fonctionnement gulp serve sur votre terminal enregistrera un extrait, à partir de cet extrait, prenez la version du navigateur-sync-client et remplacez-la 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);

?>

Notez que le nom d'hôte du script est le même que le domaine de socket localhost:3000 et qu'à ce stade, vous devriez pouvoir entrer à partir de votre nom de domaine et faire en sorte que Browser Sync recharge votre site lorsqu'un fichier php est modifié.

Si vous souhaitez vous débarrasser de l'extrait enregistré par Browser Sync:

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

Voici ce qui a fonctionné pour moi, car lorsque je déploie mon application, elle doit écouter sur toutes les adresses en utilisant 0.0.0.0:5000 - tout comme Heroku. J'utilise dokku et une option open source pour un PaaS de type Heroku.

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

Il ouvre toujours le localhost:5000 lorsque j'exécute la tâche gulp, mais comme je n'ai généralement besoin que de gulp pour le développement et non pour la production, cela a bien fonctionné pour moi.

1
Seth Bergman