Installation de Gulp


2 min read
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 tâches répétitives en développement front-end comme la minification, la concaténation, l'optimisation, les tests-unitaires, etc.

Grâce aux 3500 plugins disponibles sur le site de Gulp vous allez pouvoir gagner énormément de temps en vous passant des tâches répétitives.

Installation

En plus d'être extrêmement pratique, Gulp est super simple à installer.
Si ça n'est pas déjà fait commencer par installer nodejs : https://nodejs.org/en/.

Puis placez-vous dans votre projet et faites :

npm install gulp-cli -g
npm install gulp -D
touch gulpfile.js

Gulp est maintenant installé et vous pouvez écrire votre  première configuration dans le fichier gulpfile.js crée à la racine (on  verra ça après).

Premiers pas

Le fonctionnement de Gulp est basé sur l'execution de différents blocs qui ensembles permettent de réaliser des actions comme build une application.
Nous allons configurer notre fichier gulp pour qu'il minifie notre fichier .css.

On commence par créer l'architecture de notre app. Pour respecter les conventions on créer un fichier dist et un fichier src.  Le fichier dist = distribution contient la version "après traitement"  de l'application. Le fichier src = source est le dossier de  développement. Idéalement on ne touche jamais au fichier dist, il doit  être générer automatiquement.

mkdir srcmkdir disttouch src/index.htmltouch src/style.css

Contenu du fichier index.html avec le strict minimum :

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    <head>
    <body>
        Yo
    </body>
</html>

Contenu du fichier style.css :

.body {
    background-color: blue;
    color: white;
}

Maintenant  on a tout ce qu'il faut pour commencer à travailler avec Gulp. Avec ce  fonctionnement le point d'entrée de votre site web doit être dist/index.html.

On passe au gulpfile.js :

// On importe gulpvar gulp = require('gulp');
var minifyCSS = require('gulp-csso');

Installez le packet gulp-csso

npm install --save-dev gulp-csso

Les  packets gulp sont disponibles via npm. Ils commencent toujours par "gulp-". Le packet CSSO (CSS Optimizer) est un minifier CSS. Il permet de supprimer les informations redondantes, compresser et restructurer le code.
Il existe d'autres packets qui font la même chose pour le js et html.

Si tout est ok vous pouvez lancer la commande suivante dans votre terminal :

gulp

Et  hop, votre site web est dispo via dist/index.html. Dans le dossier dist vous devez trouver votre index ainsi que votre style.css minifié.
Pour info vous pouvez également exécuter une tâche spécifique en précisant son nom.
Exemple : "gulp css" ou "gulp html". Vous pouvez afficher l'aide avec "gulp -h".

Maintenant à chaque modification vous devrez recompiler votre code avec la commande 'gulp'... C'est pourquoi dans un prochain article nous verrons comment mettre en place un "live reload" pour qu'à chaque modification du code gulp recompile automatiquement le code et que votre navigateur rafraîchisse la page.


Configurer un Reverse Proxy Nginx
Previous article

Configurer un Reverse Proxy Nginx

Un Reverse Proxy, en français Proxy Inverse, permet à un utilisateur d'accéder à des services (serveurs) internes au serveur. Les applications courantes du Reverse Proxy

Livereload avec Gulp
Next article

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


Related Articles

Livereload avec Gulp
2 min read

GO TOP

🎉 You've successfully subscribed to FrenchCode!
OK