Dans cet article, je vais vous parler de Browsersync, un module Node.js qui va énormément augmenter votre productivité dans vos développements web. Browsersync permet de synchroniser et d’actualiser automatiquement vos pages web lors de la modification de fichiers source, et ce sur plusieurs navigateurs ou appareils s’il le faut. Voici quelques cas d’utilisation qui pourraient vous intéresser :

• Mise à jour du CSS en temps réel : ne perdez plus de temps à jongler entre votre IDE et votre navigateur afin de constater les changements visuels. Browsersync injecte les fichiers modifiés sans recharger la page, le résultat est immédiat !
• Rechargement de page automatique : vous venez juste de modifier du HTML ? Browsersync rafraîchit votre navigateur à votre place.
• Partagez ce que vous voyez dans votre navigateur sur d’autres ordinateurs, tablettes ou smartphones via un proxy intégré. Les actions de la souris, du clavier et le changement de page sont également reproduits sur les navigateurs de vos invités.
• Intégrer ces fonctionnalités à un processus de build. Par exemple, dans une tâche Gulp après une compilation SASS.

Browsersync embarque un serveur web basique qui peut suffire pour des projets HTML / JavaScript, mais si vous en avez déjà un (ASP.NET sur IIS, par exemple), il peut agir en tant que proxy. Installez-le de manière globale avec la commande :

npm install -g browser-sync

Utiliser Browsersync en ligne de commande

Créez un projet simple en HTML / CSS / JavaScript. Voici la structure du mien, j’ai ajouté jQuery et Bootstrap en CDN pour qu’il ressemble un minimum à quelque chose :

mon_site
|-- index.html
|-- css
|   +-- style.css
+-- js
    +-- app.js

Dans un terminal, placez-vous dans le dossier du projet et lancez Browsersync pour qu’il surveille les fichiers HTML, CSS et JavaScript :

browser-sync start --server --files "**/*.html, **/*.css, **/*.js"

Votre navigateur doit normalement s’ouvrir tout seul sur localhost, port 3000. Si vous modifiez du CSS, les modifications seront injectées. Pour l’HTML et le JavaScript, la page sera rechargée. C’est magique !

Ce serveur local peut être accessible à d’autres personnes si vous leur communiquez l’adresse IP locale de votre poste au lieu de localhost, avec le même port. Comme je l’ai dit en introduction, elles pourront voir vos modifications et actions en temps réel. Si vous souhaitez modifier ce comportement, Browsersync propose une interface d’administration sur le port 3001.

Si vous avez déjà un serveur web existant

Aucun souci, pour l’exemple, embarquez le contenu du projet précédent dans une solution vide ASP.NET avec Visual Studio. Il n’est pas nécessaire d’ajouter du code C# et / ou Razor, mais ça ne changerait rien sur le principe. Sur mon ordinateur, le site est accessible via IIS Express sur localhost et le port exotique 34583. Il suffit de se placer dans le répertoire du projet Visual Studio, et de lancer la commande :

browser-sync start --proxy localhost:34583 --files "**/*.html, **/*.css, **/*.js"

Nous avons utilisé IIS Express, mais aurions très bien pu utiliser n’importe quel serveur web : Tomcat, Nginx, Express, etc.

Utilisation de l’API JavaScript Browsersync dans des scénarios plus avancés

L’API JavaScript de Browsersync peut être utilisée dans un processus de build. Prenons par exemple une tâche Gulp qui surveille et compile des fichiers SASS en CSS :

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('watch', ['sass'], function() {
    gulp.watch('src/scss/**/*.scss', ['sass']);
});
gulp.task('sass', function() {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('wwwroot/css'));
});
gulp.task('default', ['watch']);

Il est possible de créer un serveur Browsersync et d’injecter les modifications CSS dans le navigateur :

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        proxy: 'http://localhost:34583'
    });
    gulp.watch('src/scss/**/*.scss', ['sass']);
});
gulp.task('sass', function() {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('wwwroot/css'))
        .pipe(browserSync.stream());
});
gulp.task('default', ['serve']);

Conclusion

Il est toujours agréable de gagner un peu de temps lors de nos développements. Browsersync est un outil de productivité indispensable lorsque l’on travaille sur des projets web avec du design (SASS, CSS) et / ou du JavaScript. Je vous conseille vivement de l’essayer !