Livereload et Browser-sync
Les deux programmes ont une fonctionnalité commune, ils surveillent les modifications sur les fichiers sources et synchronisent en temps réel ces modifications dans les navigateurs. Plus besoin de rafraichir le navigateur pour voir le rendu des modifications. Mais ils ont tous les deux des avantages et des inconvénients :
Livereload permet de surveiller les modifications et de les synchroniser dans les navigateurs avec n’importe quel serveur. Par exemple avec gulp on pourra utiliser indifféremment le serveur gulp-connect-php, celui de Jekyll ou n’importe quel autre. Ce qui permet ainsi d’avoir les réponses des serveurs en journalisation. (Il existe différents serveurs web. À noter gulp-connect contient déjà un livereload). Lorsque l’on appelle une URL, les notifications d’erreurs et autres s’afficheront comme il se doit dans le terminal correspondant. C’est un grand plus et browser-sync ne le permet pas. Pour le débogage, ces réponses apportent bien souvent des informations, que l’on ne peut plus voir dans le cas de browser-sync qui utilise son propre serveur. Par contre on ne peut utiliser livereload que sur quelques navigateurs ou appareils en simultané (3 au plus il me semble).
Browser-sync lui a l’avantage de synchroniser toutes les pages de tous les navigateurs en temps réel. C’est à dire que l’on peut afficher une page dans firefox, chrome et opéra en même temps par exemple. On pourra également les afficher sur n’importe quel appareil, un portable, une tablette, un mobile. Et tous ces affichages seront synchronisés. Ce qui peut être un avantage quand on veut faire des modifications de css. On aura le rendu dans tous les navigateurs instantaneiment. D’autre part si on fais défiler la page dans n’importe lequel de ces navigateurs, la page défilera également sur n’importe quel autre appareil ! Fonctionnalité qui n’existe pas sur livereload. Browser-sync possède également un back office qui permets de faire des réglages précis, ou de faire du débogage par l’adjonction de plugin.
En conclusion je pense que les deux ont leur utilité. Dans un premier temps on vérifie le comportement global de toutes les pages, on débogue à l’aide de l’affichage des erreurs dans la console du serveur. Pour cela on utilise livereload. Quand on veut s’attaquer à l’aspect esthétique du site il vaut mieux utiliser browser-sync. (Si on est un développeur front-end). Mais bon deux configurations. Pour ma part j’utilise uniquemnet livereload/gulp pour mes développements. Sauf pour Ionic
Configuration de livereload
Comme on n’utilise pas de serveur dédié à l’inverse de browser-sync il faut donc mettre un script sur chaque page qui doit être affichée (voir le site de Livereload pour les différents scripts). Et ne vous méprenez pas, livereload est gratuit pour une utilisation avec gulp.
Il existe un plugin pour chrome pour automatiser le rafraîssement des pages. Mais on peut également le faire manuellement. Pour un site qui s’execute sur la même machine que le serveur Livereload on place sur chaque page html
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
Pour un site qui tourne sur une Virtualbox ou une machine sur le réseau différente de celle ou est installé Livereload
<script src="http://192.168.0.100:35729/livereload.js?snipver=1"></script>
