Publié le : 01/07/2021

Créer un site web avec MDBootstrap 4 et Gulp

La création d’un site web ergonomique et responsive est devenu de plus en plus facile grâce à MDBootstrap et Gulp. En effet, MDBootstrap combine à la fois la technologie Bootstrap et la technologie Material Design de Google.

Si vous allez visiter cet article qui parle de Bootstrap, de Material Design et de MDBootstrap, vous allez trouver de plus amples explications sur la technologie.

Nous tenons à préciser ici que MDBootstrap, comme vous pouvez le voir sur leur site web, possède une version gratuite et une version payante.

Dans ce qui suit, nous allons vous montrer comment faciliter de la création d’un site web avec gulp et MDBootstrap.

Vous pouvez voir ici un article qui parle de Gulp.

Prérequis pour la création d’un site web avec MDBootstrap et Gulp

Pour pouvoir utiliser MDBootstrap et Gulp, il nous faut télécharger et installer :

Node.js : Gulp en a besoin pour fonctionner ;
Git et Git Bash (sous Windows) : pour télécharger et installer Gulp et MDBootstrap.

Nous n’allons pas montrer ici comment installer ces deux outils.

Une fois que c’est fait, nous allons installer Gulp avec la commande :

$ npm install gulp -g

Une fois l’installation terminée, on télécharge la version Gulp de MDBootstrap.

Pour la version « Free », veuillez le télécharger ici ;
Pour la version « Pro », il faut l’acheter ici.

Création d’un nouveau projet Gulp

Après avoir installé les différents éléments mentionnés ci-dessus, nous allons passer à la création d’un nouveau projet Gulp.

Pour ce faire, nous allons, dans un premier temps, dézipper MDBootstrap que nous venons de télécharger. L’arborescence de notre répertoire devrait ressembler à l’image ci-dessous :

Ensuite ouvrir Git BASH (sous windows) ou un terminal sous Linux ou Mac et taper la commande ci-dessous :

$ npm init

Cette commande va vous demander divers informations que vous pouvez remplir comme le nom du projet, sa description, sa version, etc… Nous pouvons laisser tous en blanc en appuyant successivement sur la touche Entrée. A la fin, il faut confirmer la question en cliquant sur le bouton Entrée.

Par la suite, nous allons taper la commande ci-dessous pour installer Gulp.

$ npm install --save-dev gulp

Une fois que c’est fait, nous allons installer différents dépendances avec la commande :

$ npm install --save-dev gulp-sass gulp-autoprefixer gulp-cssmin browser-sync gulp-concat gulp-minify gulp-rename gulp-imagemin node-sass

Après l’installation de ces différents dépendances, nous pouvons déjà lancer notre premier projet avec la commande :

$ gulp mdb-go

Une fois la commande lancé, un navigateur va être lancé automatiquement pour afficher index.html qui se trouve dans le répertoire dist de votre projet. La video ci-dessous nous montre ce qui se passe quand on suit les étapes ci-dessus.

Nous voyons dans la vidéo que lorsqu’on modifie le fichier index.html, le changement se répercute automatiquement sur le navigateur dès qu’on enregistre.

Auto-minification

L’auto-minification est le processus de minifier les fichier CSS style.css, qui se trouve dans le répertoire dist/css, après que l’on ait enregistré.

En effet, si on regarde le fichier index.html, on trouve que le fichier qui est utilisé est style.min.css et non style.css. Ce qui signifie que c’est le fichier minifier de style.css qui est utilisé. De ce fait, on doit toujours minifier style.css une fois qu’on l’a modifié. Ce processus est fait automatiquement grâce à Gulp. Vous pouvez voir ce processus en action grâce à la vidéo ci-dessous.

Compression automatique des images

La compression automatique des images peut aussi se faire avec Gulp. Pour cela, il faut placer un image dans le répertoire img et après, Gulp va le compresser et va placer le résultat dans le répertoire dist/img. La vidéo ci-dessous nous montre comment ça fonctionne.