Recherche de site Web

Gulp - Une boîte à outils pour automatiser les tâches pénibles de développement


Gulp est une petite boîte à outils qui automatise les tâches répétitives. Ces tâches répétitives consistent généralement à compiler des fichiers CSS, JavaScript ou, fondamentalement, lorsque vous utilisez un framework qui traite des fichiers JavaScript/CSS non standard, vous souhaiterez utiliser un outil d'automatisation qui récupère ces fichiers, les regroupe et compile le tout pour que votre navigateur puisse facilement comprendre. il.

Gulp est utile pour automatiser les tâches suivantes :

  • Compilation de fichiers JS et CSS
  • Actualisation de la page du navigateur lorsque vous enregistrez un fichier
  • Exécuter un test unitaire
  • Analyse des codes
  • Copie des fichiers modifiés vers un répertoire cible

Pour garder une trace de tous les fichiers dont vous avez besoin pour créer un fichier gulp, développer votre outil d'automatisation ou automatiser des tâches, vous devez générer un fichier package.json. Le fichier contient essentiellement une explication de ce qu'il y a à l'intérieur de votre projet, des dépendances dont vous avez besoin pour faire fonctionner votre projet.

Dans ce tutoriel, vous allez apprendre comment installer Gulp et comment automatiser certaines tâches de base pour vos projets. Nous allons utiliser npm – qui signifie Node Package Manager. Il est installé avec Node.js, et vous pouvez vérifier si vous avez déjà installé Nodejs et npm avec :

node --version
npm --version

Si vous ne l'avez pas déjà installé sur votre système, je vous recommande de consulter le tutoriel : Installer la dernière version de Nodejs et NPM sur les systèmes Linux.

Comment installer Gulp sous Linux

L'installation de gulp-cli peut être complétée avec npm à l'aide de la commande suivante.

npm install --global gulp-cli

Si vous souhaitez installer le module gulp localement (pour le projet en cours uniquement), vous pouvez utiliser les instructions ci-dessous :

Créez un répertoire de projet et naviguez dedans :

mkdir myproject
cd myproject

Ensuite, utilisez la commande suivante pour initialiser votre projet :

npm init

Après avoir exécuté la commande ci-dessus, une série de questions vous sera posée pour donner à votre projet un nom, une description de version et autres. Confirmez enfin toutes les informations que vous avez renseignées :

Nous pouvons maintenant installer le package gulp dans notre projet avec :

npm install --save-dev gulp

L'option --save-dev indique à npm de mettre à jour le fichier package.json avec les nouvelles devDependencies.

Notez que les devDependencies doivent être résolues pendant le développement, tandis que les dépendances pendant l'exécution. Puisque gulp est un outil qui nous aide dans le développement, il doit être résolu au moment du développement.

Créer un fichier Gulp

Créons maintenant un fichier gulp. Les tâches que nous souhaitons exécuter se trouveront dans ce fichier. Il est automatiquement chargé lors de l'utilisation de la commande gulp. À l'aide d'un éditeur de texte, créez un fichier nommé gulpfile.js. Pour les besoins de ce tutoriel, nous allons créer un test simple.

Vous pouvez insérer le code suivant dans votre gulpfile.js :

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Enregistrez le fichier et essayez maintenant de l'exécuter avec :

gulp hello

Vous devriez voir le résultat suivant :

Voici ce que fait le code ci-dessus :

  • var gulp=require('gulp'); – importe le module gulp.
  • gulp.task('hello', function(done) { – définit une tâche qui sera disponible depuis la ligne de commande.
  • console.log('Hello world!'); – affiche simplement « Hellow world! » à l'écran.
  • done(); – nous utilisons cette fonction de rappel pour indiquer à gulp que nos tâches sont terminées.

Bien sûr, ce qui précède n'est qu'un exemple pour montrer comment le gulpfile.js peut être organisé. Si vous souhaitez voir les tâches disponibles depuis votre gulpfile.js, vous pouvez utiliser la commande suivante :

gulp --tasks

Plugins Gulp

Gulp propose des milliers de plugins, tous offrant des fonctionnalités différentes. Vous pouvez les consulter sur la page du plugin de Gulp.

Ci-dessous, nous utiliserons le plugin minify-html dans un exemple plus pratique. Avec la fonction ci-dessous, vous pouvez réduire les fichiers HTML et les placer dans un nouveau répertoire. Mais d'abord, nous allons installer le plugin gulp-minify-html :

npm install --save-dev gulp-minify-html

Vous pouvez faire en sorte que votre gulpfile.js ressemble à ceci :

cat gulpfile.js
Exemple de sortie
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Ensuite, vous pouvez réduire les fichiers HTML à l'aide des commandes suivantes.

gulp minify-html
du -sh /src dest/

Conclusion

Gulp est une boîte à outils utile qui peut vous aider à améliorer votre productivité. Si cet outil vous intéresse, je vous recommande fortement de consulter sa page de documentation, disponible ici.