Qu’est-ce que Livereload ?
Livereload est un programme permettant de rafraîchir automatiquement des onglets dans Firefox (ou Chrome pour ceux qui préfèrent). C’est très pratique pour développer avec 2 écrans : le navigateur ouvert sur un écran, l’éditeur ouvert sur l’autre… plus besoin de toucher la souris. Mine de rien, c’est le genre de détails qui fait gagner du temps.
Installation
Livereload est composé de deux parties. D’un côté, un outil surveille les modifications sur les fichiers. De l’autre côté, une extension du navigateur s’y connecte et rafraichit lorsque c’est nécessaire.
sudo apt-get install rubygems
sudo gem install rb-inotify livereload
Puis installer l’extension Livereload (même si pas compatible soi disant, ça fonctionne sans aucun problème chez moi)
Configuration
Le bouton LR de LiveReload n’est pas ajouté à votre toolbar par défaut… il faut le faire à la main : clic droit sur la toolbar > customize : drag & drop le bouton LR dans la toolbar.
Éventuellement, si vous développez en local mais que votre nom de domaine n’est pas « localhost » : dans Firefox > add-ons > onglet Extensions > Livereload : cliquez sur Preferences et mettez dans Host le nom de domaine sur lequel vous développez (monpc.maboite.com par exemple).
Remarque : j’ai du redémarrer le navigateur une seconde fois après cette dernière modification pour qu’elle soit prise en compte…
Utilisation
cd mon/repertoire/a/surveiller && livereload
Dans le navigateur, activer livereload sur l’onglet dans lequel on bosse en cliquant sur le bouton LR ajouté à l’étape Configuration.
Voilà, il suffit maintenant de modifier un fichier (.html .css .js .png .gif .jpg .php .php5 .py .rb .erb) pour voir l’onglet actualisé automatiquement. Cerise sur le gâteau : si la modif ne touche que la CSS, seule la CSS est rechargée.