Tutoriel Vidéo BrowserSync BrowserSync

Télécharger la vidéo

24-11-2014 15:54:00

Je vous propose de découvrir aujourd'hui Browser Sync. Browser Sync est un module pour nodeJS qui va vous permettre d'actualiser et de synchroniser automatiquement vos pages web pour un développement plus rapide.

Installation

L'installation se fait simplement gràce à Node.js.

npm install -g browser-sync

Ce qui téléchargera automatiquement et installera de manière globale la commande browser-sync.

Démarrer BrowserSync

BrowserSync dispose de 2 modes de fonctionnements. Il peut démarrer un serveur HTTP depuis n'importe quel dossier (pratique pour rapidement tester des fichiers html.

browser-sync start --server

Si vous disposez d'un serveur vous pouvez utiliser browser sync comme proxy (pratique pour une app PHP ou autre)

browser-sync start --proxy "local.dev"

Ecouter les modifications

En plus du paramètre --server et --proxy il est possible de préciser les fichier à écouter et qui déclencheront un rechargement automatique

browser-sync start --server --files "css/*.css, js/**/*.js, **/*.php"

Avantages de BrowserSync

Je sais que cela fait un petit moment que je vous présente des outils similaires. Alors quel sont les avantages de BrowserSync par rapport à fb-flo ou livereload ?

  • BrowserSync utilise les websocket pour actualiser, donc aucune extension côté navigateur n'est nécessaire
  • On peut l'utiliser pour synchroniser plusieurs navigateurs et même tester en live les version sur mobile et tablette (il faudra en revanche être sur le même réseau local)
  • Il marche du premier coup sur Windows et Mac XD