Un développement rapide avec BrowserSync

C’est quoi BorwserSync ?

BrowserSync est un module node.js, qui permet de synchroniser les navigateurs pour le développement d’une application web. Son but est d’injecter les modifications (html, css, js) dans le navigateur au moment où il y a un changement.

Cela va nous permettre de gagner du temps dans notre développement.

Principales fonctionnalités.

Actualisation automatique du navigateur. (Live reload)

C’est la principale fonction de BrowserSync, si nous modifions notre code, alors la modification sera prise en compte, et le navigateur sera actualisé automatiquement.

Synchronisation des navigateurs

Ce module permet de synchroniser nos tests effectués dans différents navigateurs.

 

BrowsserSync est aussi compatible avec des outils de build comme GULP et Grunt

 

Mode de fonctionnement

  • BrowserSync crée un serveur.
  • Ensuite, il injecte un fichier Javascript utilisant un WebSocket dans chaque page pour communiquer avec le client. C’est le WebSocket qui envoie toutes les informations du server au client. Dès qu’il y a une modification, BrowserSync l’observe et dit au navigateur de se rafraîchir via ce WebSocket.

Installation

BrowserSync est un module node.JS donc pour l’installer, nous devrions avoir nodeJS installé dans notre machine et aussi le gestionnaire de module de nodeJS qu’on appelle npm.

Pour installer BrowserSync, utiliser la ligne de commande suivante :

Installation global

npm install –g browser-sync

Installation local

npm install --save browser-sync

 

Pour savoir, si l’installation a bien été terminée, utiliser la commande suivante :

Installation global

browser-sync --version

Installation local

local_dir/node_modules/.bin/browser-sync --version

 

Passer dans le développement

Il faut noter que Browser-sync utilise des fichiers statiques. Donc pour commencer, il faut créer des fichiers statiques (html, css, javascript).

index.html

<h1>Test browser-sync</h1>

style.css

h1 {
    background-color: #ff0000;
}

 

Lançons notre commande browser-sync:

browser-sync start –server –files '*.html, css/*.css'

 

Le navigateur par défaut s'ouvre avec l'adresse mentionnée.

Local représente l’ adresse locale.

External est l’ adresse ip pour tester l’application dans les tablettes ou mobiles, on utilisant le réseau LAN ou wifi.

UI est l’interface graphique de BrowserSync pour sa configuration.

Aller plus loin avec browserSync et Gulp

Nous avons vu un peu plus haut qu’il est compatible avec des outils de build comme gulp et grunt.

Donc, nous allons voir comment ça marche avec gulp.

Installation de gulp

npm install -g gulp

Cette installation est globale, pour une installation locale nous enlevons -g et remplaçons par --save-dev ou --save pour être sûr que si une autre personne installe notre projet, elle fera juste npm install et toutes les dépendances node utilisées pour le projet seront installées.

Configuration de gulp et de BrowserSync

gulpfile.js

var gulp = require('gulp');
var bs = require('browser-sync').create(); // instance de browser-sync
// création de nouvelle tache
gulp.task('browser-sync', function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

 

Dans un terminal:

gulp browser-sync

Le fonctionnement  est le même qu’avant. Une fois cette commande lancée, notre page web s’actualise dès qu’il y a des modifications.

Mais toutefois, nous avons déjà un server dans notre machine, et nous voulons le garder sans utiliser le serveur par défaut de BrowserSync. Pour cela, il y a une option proxy dans l’api qui peut être utile pour des serveurs à part.

 

...
bs.init({
    server: {
        baseDir: "./"
    },
    proxy :  {
          target : "localhost:8080", // proxy pour localhost:8080
          ws : true
    }
});

Si le serveur autorise l’utilisation du WebSocket, l’option ws : true, permet de dire à BrowserSync que votre serveur le supporte.

Allez plus loin dans le développement avec gulp + BrowserSync et SASS.

De nos jours, l’utilisation du sass (Framework css) est indispensable, car il permet aussi de nous faire gagner de temps.

Ces trois outils peuvent être utilisés dans un développement.

SASS

Pour SASS nous aurions besoin du module gulp-sass :

npm install –save-dev gulp-sass

Voici la tâche gulp pour la compilation :

…
var sass = require('gulp-sass');
…
gulp.task('sass', function () {
    return gulp.src('scss/*.scss') // Dossier qui contient les fichiers .scss
                .pipe(sass({
			sourceComments: 'map',
			outputStyle: 'nested',
			includePaths: ['bower_components/bootstrap/scss'],
			errLogToConsole: true
				}).on('error', function(err) {
					console.log(err.message); // afficher le message d'erreur dans la console
					bs.notify(err.message, 10000); // afficher le message d'erreur dans le navigateur
				})) // excecution du module sass()
                .pipe(gulp.dest('css')); // écrire les fichiers css compilé dans le dossier css
                .pipe(bs.reload({stream : true})) // après compilation, exécuter bs.reload.
});

Lançons cette tâche:

gulp sass

Notre navigateur sera actualisé automatiquement après la compilation de sass en css.

Détecter une modification:

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

 

Dès qu’il y aura une modification dans les fichiers *.scss, la commande gulp sass sera exécutée. Après compilation, le navigateur sera rafraîchit.

De même pour les fichiers html, s’il y a un changement, nous écoutons ce changement, grâce à .on(‘change’, …) de gulp.watch . Après écoute, nous exécutons la fonction de rappel de BrowserSync pour actualisé le navigateur.

Voici la version final du gulpfile.js:

var gulp = require('gulp');
var bs = require('browser-sync').create(); // instance de browser-sync
var sass = require('gulp-sass');
// création de nouvelle tache
gulp.task('browser-sync', [‘sass’], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});
gulp.task('sass', function () {
    return gulp.src('scss/*.scss') // Dossier qui contient les fichiers .scss
                .pipe(sass({
			sourceComments: 'map',
			outputStyle: 'nested',
			includePaths: ['bower_components/bootstrap/scss'], // pour l'utilisation de bootstrap sass ou d'autre framework scss 
			errLogToConsole: true
				}).on('error', function(err) {
					console.log(err.message); // afficher le message d'erreur dans la console
					bs.notify(err.message, 10000); // afficher le message d'erreur dans le navigateur
				}))) // excecution du module sass()
                .pipe(gulp.dest('css')); // écrire les fichiers css compilé dans le dossier css
                .pipe(bs.reload({stream : true})) // après compilation, exécuter bs.reload.
});
gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

Conclusion

Je vous invite à utiliser BrowserSync dans votre développement, surtout, si vous êtes un Front-end développeur. Croyez-moi, vous gagnerez plus de temps dans votre teste grâce au mode synchro des navigateurs fourni par ce module.

Nous les développeurs Front-end, nous devrions obligatoirement tester notre travail sur plusieurs navigateurs. BrowserSync fait l’affaire. 😉

 

Liens utiles:

API et documentation : https://browsersync.io/docs/api

Gulp: http://gulpjs.com/, https://blog.netapsys.fr/avec-gulp-automatisez-vos-taches/

Sass: http://sass-lang.com/, https://blog.netapsys.fr/sass-compass-styliser-votre-css/

Un commentaire

  1. GULP est un outil super, combiné avec BROWSER-SYNC et SASS, c’est juste du bonheur. Pour des développements professionnels et rapides, faites confiance aux meilleures technologies du WEB !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *