Le développement web 2.5 avec Gulp, Sass, Browsersync et Autoprefixer

Si j’avais reçu 1 euro à chaque fois que j’ai rechargé la page d’un site en développement je serais plus riche qu’un gagnant du super loto.

Ces technologies permettent de créer rapidement une page web se rafraîchissant automatiquement au fur et à mesure que vous codez et enregistrez, sans autre action de votre part.

Développeurs comme intégrateurs ont toujours rêvé de pouvoir coder en live sans avoir à recharger la page du navigateur manuellement.

Si j’avais reçu 1 euro à chaque fois que j’ai rechargé la page d’un site en développement je serais plus riche qu’un gagnant du super loto.

Ce rêve a été rendu possible grace à ce qu’on appelle des Tasks Runners. Un Task Runner (yes baby) est un programme en JavaScript comme Grunt, ou dans notre cas Gulp, qui est bien plus simple à utiliser.

Je fais tout ça pour vous parler de Sass au prochain article. Pour l’instant, c’est Gulp.

Prerequis

Vous devrez avoir Node.js installé sur votre machine, et aurez besoin de savoir installer des paquets avec NPM (Node Package Manager). Tout ça en ligne de commande, donc vous devez vous y connaître un petit peu.

L’architecture du projet

Pour créer ce petit projet, vous aurez besoin de mettre en place l’architecture suivante dans le dossier de votre choix :

  • src
    • css
      • style.css
    • scss
      • style.scss
    • index.html
  • gulpfile.js

Tout va se passer dans le dossier src. Vous aurez dans un sous-dossier css le fichier style.css qui sera le produit de style.scss placé dans un autre sous-dossier scss.

Installer GULP

Je vous laisse suivre les instructions officielles :

https://gulpjs.com/

Le fichier gulpfile.js

Voici un script minime permettant de faire fonctionner Gulp avec Sass, Autoprefixer et Browsersync.

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoprefixer = require("autoprefixer"),
    browserSync = require("browser-sync").create();

function style() {
    return gulp
        .src("src/scss/*.scss")
        .pipe(sass())
        .on("error", sass.logError)
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
}

function watch() {
    browserSync.init({
        server: {
            baseDir: "./src"
        }
        // proxy: "votrevirtualhost.dev"
    });
    gulp.watch("src/scss/*.scss", style);
    gulp.watch("src/*.html").on('change', browserSync.reload);
}
 
exports.watch = watch

exports.style = style;
 
gulp.task('default',  gulp.parallel(style, watch));

Lancer GULP

Pour lancer Gulp il vous suffit de vous placer à la racine du projet dans votre terminal et de taper :

gulp

Vous pourrez alors consulter le rendu sur :

http://localhost:3000

Tout ce que vous écrirez en scss sera converti en css classique. Mais pas que.

Browsersync et Autoprefixer

Browsersync est un outil puissant qui vous permet entre autres de rendre votre développement accessible depuis l’extérieur, mais aussi de recharger simultanément plusieurs navigateurs.

Vous pouvez avoir accès à la configuration de Browsersync via cette adresse :

http://localhost:3001/

Ce panneau de configuration de vous fournira entre autre l’adresse IP à communiquer pour qu’une autre personne puisse voir ce que vous développez, sur un autre ordinateur.

Vous pouvez tout aussi bien poser votre smartphone sur la table en ayant préalablement accédé via son navigateur à l’IP susdite et commencer à développer simultanément pour desktop et mobile.

Autoprefixer quand à lui se charge d’ajouter les prefixes vendeurs à votre code css sans que vous n’ayez à réecrire plusieurs fois la même propriété. N’est-ce pas merveilleux ?

Bientôt Sass

Je me suis lancé ce matin avec l’intention d’écrire un article sur Sass. Mais j’ai tellement l’habitude de l’utiliser dans mes développement que je ne me pose même plus la question de comment on l’installe quand on débute.

Aussi dans un prochain post je reviendrais sur l’utilisation de Sass, qui pour moi est super génial.

Alors, à la prochaine.