Livereload avec Gulp


2 min read
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 !


Installation de Gulp
Previous article

Installation de Gulp

Gulp est un task runner, autrement dit un "automatiseur de tâches". Il permet d'exécuter des scripts à votre place. Il est utilisé pour automatiser les

Ajouter un runner Docker sur GitLab
Next article

Ajouter un runner Docker sur GitLab

GitLab Runner est un projet open source permettant d'effectuer des  taches et de retourner le résultat à GitLab. Utilisé avec GitLab CI, cet  outil permet


Related Articles

Installation de Gulp
2 min read

GO TOP

🎉 You've successfully subscribed to FrenchCode!
OK