webdevpro.net

npm browser-sync

npm browser-sync | webdevpro.net

Présentation

Browser-sync est un module NodeJS permettant de synchroniser un code source en local et votre navigateur préféré : ne plus avoir à actualiser son navigateur à chaque ajout de html, js ou css

Ce module est must have, comme Emmet, pour améliorer votre productivité.

Installation Browser Sync

La première action à réaliser est de télécharger les fichiers source du module npm en lançant la commande suivante dans un shell :

Shell

npm install -g browser-sync #(installation globale dans l'OS)

Où sont les binaires dans l’OS ??

Shell Windows 10

> where browser-sync 
C:\Users\HP\AppData\Roaming\npm\browser-sync
C:\Users\HP\AppData\Roaming\npm\browser-sync.cmd

Utiliser Browser Sync pour un fichier html en cours

Maintenant que les sources sont téléchargées, saisir les commandes suivantes dans le shell :

Shell

cd /path/to/folder (astuce avec un drag and drop) 
browser-sync start -s -f index.html --no-ui

Ouverture du navigateur par défaut à l’adresse : http://localhost:3000, avec une petite pop up « Browsersync connected » dans la coin haut à droite de la page

firefox connecté à browser-sync

Le Shell écoute le fichier index.html comme l’annonce la dernière ligne
Dès qu’une modification est réalisée, elle est automatiquement synchronisée avec le navigateur

browser-sync waiting modification

Utiliser Browser-sync avec un fichier package.json

Shell

cd /path/to/folder (astuce avec un drag and drop)
npm init
La commande npm init crée le fichier de configuration package.json. Après avoir lancer la commande, le shell pose des questions :
  • name : nom du projet à écrire sans espace et en minuscule
  • version : version du projet
  • description : information sur le projet
  • autres questions : laisser les choix par défaut

Le dossier contient désormais le fichier package.json avec les informations suivantes :

package.json

{   
"name": "learningjs",   
"version": "1.0.0",   
"description": "utiliser browser sync",
"main": "index.js",
"scripts": {  
"test": "echo \"Error: no test specified\" && exit 1"   
},   
"author": "Malik HARRIZ",
"license": "ISC"
}

Ajout de la commande suivante dans le fichier package.json

package.json

{   
"name": "learningjs",   
"version": "1.0.0",   
"description": "utiliser browser sync",
"main": "index.js",
"scripts": {  
"test": "echo \"Error: no test specified\" && exit 1" ,
"start": "browser-sync start -s -f index.html --no-ui"
},   
"author": "Malik HARRIZ",
"license": "ISC"
}

Grâce à cette nouvelle instruction, il est désormais possible de saisir dans le shell :

Shell

cd /path/to/folder (astuce avec un drag and drop)
npm start
npm start va exécuter la commande browser-sync start -s -f index.html --no-ui

Autres commandes à connaitre

Ecouter toutes les modifications réalisées dans le fichier index.html et celles réalisées dans le dossier src :

browser-sync start -s -f index.html src --no-ui

Ecouter toutes les modifications dans tous les fichiers du dossier en cours (attention, cette commande n’est pas récursive) :

browser-sync start -s -f "*" --no-ui

Ecouter toutes les modifications dans tous les fichiers du dossier en cours ainsi que les dossier enfants et petits enfants du dossier en cours :

browser-sync start -s -f "**/**/*"  --no-ui

Attention, s’il faut ajouter une de ces commandes dans le fichier package.json , il faut échapper les doubles quote avec un anti-slash

package.json

{
  "name": "learningjs",
  "version": "1.0.0",
  "description": "utiliser browser sync",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "syncall": "browser-sync start -s -f \"**/**/*\"  --no-ui"
  },
  "author": "Malik HARRIZ",
  "license": "ISC"
}

Éteindre Browser-Sync : Ctrl+ C

Shell

Arrêter browser-sync