Gulp - Notions de base

Dans ce chapitre, vous vous familiariserez avec quelques notions de base liées à Gulp.

Qu'est-ce qu'un système de construction?

Un système de construction est appelé collection de tâches (collectivement appelées task runners), qui automatisent le travail répétitif.

Voici une liste de certaines des tâches qui peuvent être gérées à l'aide du système de construction -

• Compilation de pré-traitement CSS et JavaScript.
• Minification des fichiers pour réduire sa taille.
• Concaténation de fichiers en un seul.
• Déclenchement du serveur pour un rechargement automatique.
• Création de builds de déploiement pour stocker les fichiers résultants dans un seul emplacement.

Dans le flux de travail frontal moderne, le système de construction fonctionne avec 3 composants -

• Gestionnaires de packages
• Preprocessors
• Coureurs de tâches et outils de création

Gestionnaires de packages

Il est utilisé pour automatiser la mise à niveau de l'installation, la suppression des dépendances requises, le nettoyage des bibliothèques et des packages utilisés dans l'environnement de développement. Un exemple pour les gestionnaires de packages sontbower et npm.

Préprocesseurs

Les préprocesseurs sont très utiles pour un flux de travail moderne et efficace en ajoutant une syntaxe optimisée et des fonctionnalités supplémentaires qui se compilent dans sa langue native.

Certains des préprocesseurs populaires sont -

• CSS - SASS, LESS et Stylus.

• JS - CoffeeScript, LiveScript, TypeScript, etc.

• HTML - Markdown, HAML, Slim, Jade, etc.

Coureurs de tâches

Les exécuteurs de tâches automatisent des tâches telles que la conversion SASS en CSS, réduisent les fichiers, optimisent les images et de nombreuses autres tâches utilisées dans le flux de travail de développement. Gulp est l'un des exécuteurs de tâches dans l'environnement de travail frontal moderne et il fonctionne sur Node.

Configurer votre projet

Pour paramétrer votre projet dans votre ordinateur, créez un dossier appelé «travail» par exemple. Le dossier de travail contient les sous-dossiers et fichiers suivants -

• Src - Emplacement des fichiers et des dossiers source HTML pré-traités.

  • Images - Contient des images non compressées.

  • Scripts - Contient plusieurs fichiers de script pré-traités.

  • Styles - Contient plusieurs fichiers CSS pré-traités.

• Build - Ce dossier sera créé automatiquement qui contient les fichiers de production.

  • Images - Contient des images compressées.

  • Scripts - Fichier de script unique contenant des codes minifiés.

  • Styles - Fichier CSS unique contenant des codes minifiés.

• gulpfile.js - C'est le fichier de configuration, qui sert à définir nos tâches.