Comment synchroniser automatiquement votre navigateur avec Browsersync

Que vous soyez débutant, de la vieille école ou simplement sur un petit projet, vous n’avez pas forcément mis en place des solutions qui synchronisent automatiquement votre navigateur à chaque sauvegarde. Il existe pourtant un module npm qui peut se charger de cela à l’aide d’une seule ligne de commande : Browsersync.

Qu’est-ce que npm ?

Si npm est déjà installé sur votre ordinateur, vous pouvez passer directement à la partie suivante

npm, ou Node Package Manager est le gestionnaire de paquet officiel de node.js, la plateforme qui nous permet aujourd’hui d’exécuter du javascript côté serveur. npm permet de gérer très simplement les dépendances d’un site web et d’automatiser certaines tâches récurrentes, dont cette fameuse synchronisation de navigateur.

Pour utiliser Browsersync vous devez donc tout d’abord installer Node.js (disponible sur Windows, Mac et Linux), qui embarque automatiquement npm.

Installer Browsersync

Pour l’installation de Browsersync, deux options s’offrent à vous : l’installer globalement afin de pouvoir le lancer sur tous vos projets, ou localement pour un usage ponctuel.

J’ai personnellement choisi l’installation globale, pour simplifier le processus et éviter d’avoir à le télécharger à chaque fois (parce que la planète).

Pour ce faire, il vous faut donc ouvrir un terminal (ex : l’Invite de commandes sur windows) et exécuter la ligne de commande ci-dessous :

npm install -g browser-sync

Utiliser Browsersync sur un projet

Une des forces de Browsersync est qu’il peut être utilisé sur un site statique ou dynamique avec des changements mineurs sur la commande utilisée. Dans les deux cas, il vous suffit d’ouvrir un terminal dans le répertoire du projet que vous souhaitez surveiller et d’exécuter la commande appropriée :

Sur un site statique

Pour un site sans serveur dynamique (basé sur des fichiers .html), utilisez :

browser-sync start --server --files="**/*"

Browsersync lancera alors un petit serveur et surveillera les modifications de tous vos fichiers. Il est possible de changer certaines options, notamment la partie --files="**/*". Par exemple, si vous souhaitez surveiller uniquement le css, utilisez --files="css/*.css".

Voir toutes les options possibles dans la documentation

Sur un site dynamique

Pour un site qui tourne déjà sur un serveur dynamique local (php et autres), utilisez :

browser-sync start --proxy "[URL-LOCALE-DU-PROJET]" --files="**/*"

Browsersync entrera donc en mode proxy et se contentera de faire l’intermédiaire pour surveiller vos fichiers sans lancer de nouveau serveur. Comme pour les sites statiques, cette commande peut être personnalisée : Voir toutes les options possibles.

Récapitulatif

Pour résumer, voici les étapes nécessaires à la mise en place d’une synchronisation de navigateur avec Browsersync :

1. installer Node.js (si ce n’est pas déjà fait)
2. Ouvrir un terminal.
3. Installer Browsersync en exécutant la commande npm install -g browser-sync

4. Naviguer dans le répertoire de votre projet et lancer Browsersync avec l’une des commandes suivantes :

   • Sur un site statique : browser-sync start --server --files="**/*"
   • Sur un site dynamique : browser-sync start --proxy "[URL-LOCALE-DU-PROJET]" --files="**/*"

Une fois la synchronisation lancée, vous n’avez plus à vous soucier de recharger votre navigateur, il s’en chargera automatiquement à chaque fois que vous sauvegardez !

Il existe d’autres façons d’utiliser Browsersync, notamment avec Gulp ou Grunt, mais cette solution est à mon avis la plus simple et la plus rapide à mettre en place lorsque l’on ne cherche pas à mettre en place un workflow complexe.

Pour plus d’informations sur les autres possibilités d’installation et les options disponibles, visitez la documentation