Débuter avec 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 src
mkdir dist
touch src/index.html
touch 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 gulp
var
gulp = require('gulp'); var minifyCSS = require('gulp-csso');
// Création d'une tâche nommée html qui prend les fichiers
// avec l'extension html et les copies dans le dossier build
gulp.task('html', function(){ return gulp.src('src/*.html') .pipe(gulp.dest('dist/')) });
// Création d'une tâche nommée css qui prend les fichiers
// avec l'extension css, les minifie et les copies dans le dossier build
gulp.task('css', function(){ return gulp.src('src/*.css') .pipe(minifyCSS()) .pipe(gulp.dest('dist/')) });
// Création de la tâche default qui execute les tâche html et css.
// Cette tâche sera executée par défaut au lancement de la commande 'gulp'
gulp.task('default', [ 'html', 'css' ]);

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 executer 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 deverez 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 raffraîchisse la page.


Commentaires