Introduction à Gulp 4

Gulp est un outil pour automatiser les tâches fréquentes lors du développement de sites web : la minification de fichiers CSS et JavaScript, la fusion de plusieurs fichiers en un seul, la conversion de LESS et SASS en CSS, la conversion du langage TypeScript en JavaScript et d'autres tâches similaires.

Son principe de fonctionnement est le suivant : des tâches sont écrites pour le système Gulp, et Gulp exécute ces tâches dans une séquence définie.

Installons Gulp. Pour cela, dans la ligne de commande, il faut exécuter la commande :

npm install --global gulp-cli

Maintenant, créons un projet dans lequel Gulp sera utilisé. Pour cela, dans le dossier du projet, créons la structure de fichiers suivante :

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

Il faut aussi ajouter package.json dans le dossier du projet. Après cela, on peut installer Gulp dans le projet. Pour cela, dans la ligne de commande, en se trouvant dans le dossier du projet, il faut exécuter la commande suivante :

npm install --save-dev gulp

Créez un projet et installez-y Gulp.