Comment utiliser Gulp sur Mac, Windows, Linux

Gulp est un système de gestion de tâches. Il sert à par exemple: transformer votre Sass (ou Less) en css, minifier, utiliser autoprefixer, joindre des fichiers en 1 seul, vérifier vos JavaScript avec jsLint et j’en passe. Si vous codez le moindrement c’est pratique. C’est devenu un de mes outils indispensables et en plus c’est totalement gratuit. Il faut juste mettre un peu les mains à la pâte et vous serez conquis. C’est simple à installer, à utiliser et c’est rapide. Mais il ne faut pas avoir peur de terminal ou cmd ou autre…

GRUNT?

Les deux font les mêmes tâches, mais pas de la même manière. Gulp est plus jeune et compense pour certaines lenteurs de Grunt, mais il y a moins de plug-ins (juste 1894).

Grunt est mieux implanté  dans la communauté. Il a plus de plug-ins, mais il est plus lent dans son fonctionnement. Si vous aimez tout configurer, Grunt est fait pour vous.

Grunt après chaque «tâche» doit écrire le fichier même si la prochaine tâche travaille avec le même fichier.

Par exemple: on transforme un fichier scss en css et on le  «minify» par la suite.

Gulp va:

1. Ouvrir le fichier
2. Le transformer en css
3. Le minifier
4. Le sauvegarder à la destination souhaitée

Grunt va:

1. Ouvrir le fichier
2. Le transformer en css
3. Sauvegarder le fichier temporaire
4. Ouvrir le fichier temporaire
5. Le minifier
6. Sauvegarder le ficher temporaire
7. Ouvrir le fichier temporaire
8. Le sauvegarder à la destination souhaitée
9. Effacer le fichier temporaire

Comment on l’installe:

Il faut premièrement installer node.js. Il y a une version pour Windows, Mac et Linux. Il faut absolument installer, en même temps que node, le NPM. Pour vérifier si tout est bien installé, vous avez juste à taper dans cmd ou terminal:

npm -v

Si vous recevez une série de chiffres, c’est bon. Sinon il faut l’installer de nouveau.

La première étape est d’installer Gulp globalement (dans tout le tutoriel, s’il y a des « sudo » ne les tapez pas si vous êtes sur Windows. Sur Linux ou Mac, on vous demandera de taper votre password. Ce dernier ne s’affichera pas.)

sudo npm install gulp -g

Par la suite il faut se déplacer dans le dossier de votre projet (toujours dans terminal ou cmd). Là on tape:

npm init

Il vous demandera le nom de votre projet. Tapez-le sans espace ou caractères spéciaux. Il pose d’autres questions. C’est à vous de les entrer ou appuyer sur la touche «enter» à chaque question. À la fin, répondez par l’affirmative un fichier package.json a été créé dans le répertoire de votre dossier.

Par la suite, commencez l’installation de gulp et de certains plug-ins… Il y aura des messages de confirmation entre les différentes installations, mais pour rendre cela plus lisible je ne les marquerai pas. Aussi, dans cet exemple, je crée des tâches pour transformer du scss en css. Choisissez vos plug-ins sur npmjs.com en tapant gulp avec ce que vous voulez faire.

npm install gulp --save-dev
npm install gulp-sass@2.1.0-beta --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css

Vous pouvez laisser le terminal de côté et entrer dans votre éditeur de texte préféré.

Le fichier gulpfile.js

Ce fichier est en JavaScript et il est relativement simple à configurer. Il fera le lien entre votre installation et vos tâches.  Dans mon site web, mon arborescence est comme ci-bas:

index.html
|node_modules
|- css
|- sass
   |- style.scss
gulpfile.js
package.json

Votre installation a créé un fichier package.json et un dossier node_modules qui contient «plein de fichiers»

Nous devons créer le fichier gulpfile.js

Votre première tâche est d’inclure les «require»; nous créons les variables nécessaires pour nos tâches.

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');

La premiere tâche: «default – watch»

gulp.task('default', function(){
	gulp.watch('sass/**/*.scss', ['css']);
});

Gulp.watch vérifie constamment les fichiers indiqués pour lancer une tâche. Dans cet exemple, il regarde dans le répertoire sass et dans ses sous-répertoires pour un changement dans un des fichiers scss. Après, il lance la tâche «css».

gulp.task('css', function(){
        /* gulp choisit un fichier a éditer */
	gulp.src('sass/style.scss')
                /* lance la fonction sass */
		.pipe(sass())
                /* lance la fonction autoprefix avec ses options */        
		.pipe(autoprefix({
                   browsers: ['last 2 ie versions'],
                   cascade: false
                   })
                 )
                 /*lance la fonction minify*/     
                 .pipe(minify())
       /* écrase ou crée le fichier dans le dossier css*/
       .pipe(gulp.dest('css/'))
	
});

on ajoute simplement des .pipe avec le nom des variables créées plus haut. Cela exécute la fonction.

Il ne reste plus qu’à, dans terminal ou cmd, écrire:

gulp

et il va regarder les fiches scss pour des modifications.

S’il n’y a aucune erreur, dès qu’une modification est apportée et sauvegarder, un fichier style.css va être créé dans le dossier css. Sinon, il y a une erreur dans le fichier gulpfile.js.

Le code en résumé:

Dans terminal ou cmd:

sudo npm install gulp -g

/* dans votre répertoire de projet */
npm init

/* npm install gulp-*nom du plugin* --save-dev */
npm install gulp --save-dev
npm install gulp-sass@2.1.0-beta --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css --save-dev

/* lancer gulp */
gulp

Le fichier gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');

gulp.task('default', function(){
	gulp.watch('sass/**/*.scss', ['css']);
});

gulp.task('css', function(){
	gulp.src('sass/style.scss')
		.pipe(sass())
		.pipe(autoprefix({
            browsers: ['last 2 ie versions'],
            cascade: false
        }))
       
        .pipe(minify())
		.pipe(gulp.dest('css/'))
	
});