Livereload avec Gulp


Aujourd'hui nous allons voir comment configurer un livereload avec Gulp. Si vous n'avez jamais utilisé Gulp je vous invite à commencer par cet article : Débuter avec Gulp.
Cet article est destiné aux développeurs ayant déjà utilisé Gulp et qui souhaitent mettre en place un livereload pendant leurs développements.

Sachez qu'il existe le livereload et le hotreload.
Le Live reload recharge et rafraichit l’entièreté de l'application lorsqu'un fichier est modifié. Le livereload va redémarrer l'application et vous retourner à la route initiale.
Le Hot reload rafraichit seulement le fichier qui vient d'être modifié sans changer l'état de l'application. Par exemple, si vous modifiez le style de votre application, c'est seulement ce fichier qui va être rechargé et non toute l'application. Ainsi vous ne retournez pas à la route initiale, vous resterez sur votre page.

Installation

Le packet gulp s'appelle gulp-livereload.
Si vous n'avez pas encore installer gulp et créer le fichier gulpfile.js, référez-vous à l'article : Débuter avec Gulp.
On installe gulp-livereload et gulp-less pour l'exemple :

npm install --save-dev gulp-livereload gulp-less

Utilisation

Dans votre fichier gulpfule.js :

// On inclut les packets nécessaires.
// Pour cet exemple on utilise less pour le css.

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

// Création d'une tâche qui prends les fichier .less dans le dossier src
// Puis qui les compile "less()"
// Puis les copies dans le dossier "dist"
// Pour finir on ajoute la fonction livereload ce qui permet d'effectuer
// un refresh à la fin de l’exécution de ce bloc

gulp.task('less', function() {
  return gulp.src('src/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});

// Enfin on créer la fonction watch qui permet de démarrer le livereload.
// la ligne gulp.watch(...) indique que lors de la sauvegarde d'un fichier .less
// dans src/ on lance la tâche less !

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('src/*.less', ['less']);
});
Et voilà, notre serveur livereload est prêt ! En lançant la commande gulp watch dans votre console vous allez démarrer votre tâche livereload !

Maintenant votre .less sera automatiquement recompilé après la sauvegarde ! Mais il manque la partie permettant de rafraichir votre navigateur ! Pour faire au plus simple je vous invite à installer l'extension livereload :

Une fois installé (pour ma part sur firefox) cet icône va s'afficher dans votre barre. Cliquez dessus pour qu'il devienne vert : .

Félicitation ! Vous avez mis en place un livereload avec Gulp !

Commentaires