BROWSER-SYNC
Utilisation de l'incroyable Browser-Sync
- mettre à jour les navigateurs (n'importe lequel) lorsque le code source change (HTML, CSS, images, etc.)
- prend en charge Windows, MacOS et Linux
- vous pouvez même regarder vos mises à jour de code (en direct) à l'aide de vos appareils mobiles
Instalation sur MacOS (voir leur aide à installer sur d'autres OS)
Installez NVM pour pouvoir essayer n'importe quelle version de Node
brew install nvm # install a Node version manager
nvm ls-remote # list available Node versions
nvm install v10.13.0 # install one of them
npm install -g browser-sync # install Browser-Sync
Comment utiliser la synchronisation du navigateur pour les sites statiques
Voyons deux exemples:
browser-sync start --server --files . --host YOUR_IP_HERE --port 9000
browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000
L' --server
option vous permet d'exécuter un serveur local où que vous soyez dans votre terminal et --files
vous permet de spécifier quels fichiers seront suivis pour les modifications. Je préfère être plus spécifique pour les fichiers suivis, donc dans le deuxième exemple, j'utilise ack
pour répertorier les extensions de fichiers spécifiques (il est important que ces fichiers n'aient pas de noms de fichiers avec des espaces) et j'utilise égalementipconfig
pour trouver mon IP actuelle sur MacOS.
Comment utiliser la synchronisation du navigateur pour les sites dynamiques
Dans le cas où vous utilisez PHP, Rails, etc., vous avez déjà un serveur en cours d'exécution, mais il ne s'actualise pas automatiquement lorsque vous apportez des modifications à votre code. Vous devez donc utiliser le --proxy
commutateur pour permettre à la synchronisation du navigateur de savoir où se trouve l'hôte de ce serveur.
browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open
Dans l'exemple ci-dessus, j'ai déjà une application Rails en cours d'exécution sur mon navigateur 192.168.33.12:3000
. Il fonctionne vraiment sur une machine virtuelle à l'aide d'une boîte Vagrant, mais je pouvais accéder à la machine virtuelle en utilisant le port 3000 sur cet hôte. J'aime --no-notify
arrêter la synchronisation du navigateur en m'envoyant une alerte de notification sur le navigateur chaque fois que je change de code et--no-open
arrêter le comportement de synchronisation du navigateur qui charge immédiatement un onglet du navigateur au démarrage du serveur.
IMPORTANT: Juste au cas où vous utilisez Rails, évitez d'utiliser Turbolinks sur le développement, sinon vous ne pourrez pas cliquer sur vos liens lorsque vous utilisez le--proxy
option.
J'espère que cela serait utile à quelqu'un. J'ai essayé de nombreuses astuces pour actualiser le navigateur (même un ancien post que j'ai soumis sur cette question StackOverflow en utilisant AlfredApp il y a longtemps), mais c'est vraiment la voie à suivre; plus de hacks, ça coule juste.
CRÉDIT: démarrer un serveur Web de rechargement en direct local avec une seule commande