Voyons ensemble comment utiliser Gulp. Cet outil va vous permettre de transformer vos fichiers de développement, de type feuilles de styles ou javascripts en fichiers de production optimisés. Et ceci, en exécutant différents traitements que vous lui aurez demander d’appliquer à ces fichiers de développement.
Vous l’aurez compris, c’est de Front-End dont il sera question dans cet article.
Vous utilisez peut-être déjà des outils similaires tels que Grunt pour faire ce type de traitement. Le principal avantage de Gulp sur ce dernier est qu’il est nettement moins verbeux et de configuration plus aisée.
Installer node.js
Le fichier package.json
Dans un dossier test que vous appelez ‘monprojet’ (ou n’importe quoi d’autre qui vous passe par la tête), créer un fichier package.json. Typiquement, ce fichier va permettre de donner à npm d’identifier le projet et de gérer ses dépendances.
Exemple:
|
1 2 3 4 5 6 7 8 |
{ "name" : "monprojet", "version" : "0.1", "dependencies": { "express": ">= 1.2.0", "optimist": ">= 0.1.0" } } |
Pour ce qui nous intéresse, contentez-vous pour l’instant de créer un fichier package.json, contenant uniquement un objet js vide :
|
1 2 3 4 |
// monprojet/package.json { } |
Ajouter Gulp à votre projet
Vous pouvez maintenant installer Gulp dans votre dossier ‘monprojet’.
|
1 |
npm install gulp --save-dev |
Un dossier ‘node_modules’ a été ajouté dans votre dossier ‘monprojet’. Si vous ouvrez le fichier package.json, vous verrez ceci:
|
1 2 3 4 5 |
{ "devDependencies": { "gulp": "~3.8.7" } } |
Installer des plugins
Notre task runner fonctionne avec des petits plugins, dédiés chacun à une tâche spécifique. Dans notre exemple, nous allons utiliser les suivants:
- gulp-less : sert à transformer nos fichiers de styles .less en fichiers .css, exploitables par les navigateurs
- gulp-minify-css: sert à compresser nos fichiers .css, en supprimant tous les espaces inutiles
- gulp-autoprefixer : sert à ajouter automatiquement les préfixes navigateurs aux règles css
Maintenant que vous savez à quoi servent ces plugins, nous pouvons les ‘installer’ (en d’autres termes, les télécharger dans le dossier ‘node_modules’) :
|
1 |
npm install gulp-less gulp-autoprefixer gulp-minify-css --save-dev |
Si vous ouvrez votre fichier package.json, vous verrez que les nouvelles dépendances de développement sont bien notifiées (et donc exploitables par npm).
Le fichier gulpfile.js
Ca y est, nous arrivons à la partie la plus intéressante du tutorial :). Mettons la main à la pâte.
Dans votre dossier ‘monprojet’, créez un fichier nommé gulpfile.js. Comme vous l’aurez sans doute compris, c’est ce même fichier que gulp va chercher dans votre dossier de travail pour effectuer ses traitements.
Récupérer les plugins
Premièrement, nous allons appeler les modules, que nous allons stocker dans des variables, de manière à les exploiter plus loin dans le code (de gulpfile.js).
|
1 2 3 4 5 6 7 |
// Récupérer Gulp var gulp = require('gulp'); // Récupérer les modules complémentaires var less = require('gulp-less'); var prefixer = require('gulp-autoprefixer'); var minifycss = require('gulp-minify-css'); |
Créer votre première tâche
Nous allons créer notre première tâche. Pour ceci, préparer le terrain en créant un dossier ‘css/less’, dans lequel nous mettrons notre fichier de style ‘styles.less’. Créez également un dossier ‘min’ dans le dossier ‘css’, qui servira a accueillir notre fichier traité.
Le fichier styles.less contient le code suivant:
|
1 2 3 4 5 6 7 |
// Un peu de code less pour tester tout ça @grey: #333333; body{ background-color: @grey; animation: foo 5s; } |
Ensuite ajoutons notre tâche, je vous expliquerai ensuite comment tout ça fonctionne.
|
1 2 3 4 5 6 7 |
gulp.task('css', function() { return gulp.src('css/less/styles.less') .pipe(prefixer('last 10 versions')) .pipe(less()) .pipe(minifycss()) .pipe(gulp.dest('css/min')); }); |
Voici la manière dont le code suivant est interprété:
1. gulp.task(‘css’, [...]) : On enregistre une nouvelle tâche qui s’appelle ‘css’.
2. gulp.src : On appelle le fichier source ‘css/less/styles.less’, qui va être l’objet des traitements qui suivent
3. pipe() : va permettre de chaîner, de faire se suivre, les différents traitements
4. Ensuite on appelle les plugins less, puis autoprefixer et minifycss
5. Enfin, on sauve le fichier css dans le dossier ‘css/min’
Et voilà! Pour lancer ce traitement, il vous suffit de vous placer dans votre dossier ‘monsite’ et de taper
|
1 |
gulp css |
Vérifiez ensuite que tout a fonctionné en ouvrant le fichier destination:
|
1 |
body{background-color:#333;-webkit-animation:foo 5s;animation:foo 5s} |
Créer la ‘default task’
La tâche “default” est, comme son nom l’indique, la tâche qui se lancera par défaut quand vous taperez “gulp” dans votre shell.
Dans notre code, elle va faire appel à la tâche enregistrée sous le nom ‘css’ . Ensuite, elle va “écouter” tout changement du fichier .less et lancer cette même tâche ‘css’ à chaque fois que vous enregistrerez une modification du fichier styles.less.
Plus besoin de taper gulp css à chaque modification du fichier less. Le task runner vérifie automatiquement toute modification du fichier pour vous et fait ce que vous lui avez demandé 
. Pour arrêter cette tâche, il vous suffira de faire ‘ctrl-c’.
Le code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[...] // La tâche default s'exécute quand vous tapez "gulp" dans le shell gulp.task('default', function() { // Lancer la tâche 'css' gulp.run('css'); // Ecouter tout changement du fichier less // et lancer la tâche 'css' lors de toute // modification de ce fichier gulp.watch('css/less/styles.less', function() { gulp.run('css'); }); }); |
Voici le fichier gulpfile.js complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Récupérer Gulp var gulp = require('gulp'); // Récupérer les modules complémentaires var less = require('gulp-less'); var prefixer = require('gulp-autoprefixer'); var minifycss = require('gulp-minify-css'); gulp.task('css', function() { return gulp.src('css/less/styles.less') .pipe(less()) .pipe(prefixer('last 10 versions')) .pipe(minifycss()) .pipe(gulp.dest('css/min')); }); // La tâche default s'exécute quand vous tapez "gulp" dans le shell gulp.task('default', function() { // Lancer la tâche 'css' gulp.run('css'); // Ecouter tout changement du fichier less gulp.watch('css/less/styles.less', function() { gulp.run('css'); }); }); |
Lancer la tâche ‘default’
Maintenant, vous n’avez plus qu’à taper ‘gulp’ depuis votre dossier ‘monprojet’ pour que cette tâche s’exécute. Vous pouvez ensuite faire autant de modifications que vous voulez sur votre fichier less. Chaque sauvegarde de ce fichier sera automatiquement répercutée sur votre fichier .css correspondant.
Pour aller plus loin
Pour rester simples, nous n’avons pas parlé de ce que nous pouvions faire avec les fichiers javascripts. Je vous invite à faire des recherches dans ce sens pour pouvoir gérer tout aussi facilement ces derniers!
A très bientôt pour de nouveaux articles traitant spécifiquement de Laravel