Gulp.js – comment ça marche

Lorsque vous développez vos applications, site internet, site ecommerce, etc … Vous devez rester concentré sur votre développement. Il existe de nombreux outils pour vous simplifier la vie au quotidien. Compass est un préprocesseur très utile pour vous aider à générer vos css. Vous allez devoir compiler le scss pour obtenir votre css. Puis passer sur un peu de JS et minifier le tout pour un gain de chargement. C’est là que Gulp va vous aider. Mais alors comment utilise Gulp ?

Comment utiliser Gulp ?

Tout se passe en ligne de commande.

Pour notre exemple nous allons réaliser un petit gulpfile.js pour :

• Compiler du scss en css
• Minifier le css
• Minifier le js

Initialiser votre projet :

1. npm init
   (puis valider toutes les étapes avec un « Entrée ». Cela va créer votre fichier package.json)
2. npm install gulp –save-dev
   (pour installer gulp. Cela va créer un dossier node_modules)
3. Créer un fichier nommé « gulpfile.js » à la racine de votre projet.
4. //gulpfile.js
   var gulp = require(‘gulp’);
   gulp.task(‘default’, function(){
   console.log(‘Introduction a GULP’);
   });
5. Puis dans votre Terminal tapez : gulp (cela va exécuter la fonction par défaut nommée « default »).
6. Cela va donner :
   > gulp
   [15:34:09] Using gulpfile C:\path\gulpfile.js
   [15:34:09] Starting ‘default’…
   Introduction a GULP
   [15:34:09] Finished ‘default’ after 205 μs

Ordre d’exécution des fonctions dans Gulp :

• gulp.task(‘fonctionA’, function(){
  // …
  });
  gulp.task(‘fonctionB’, function(){
  // …
  });
  gulp.task(‘nomDeMaFonction’, [‘fonctionA’, ‘fonctionB’], function(){
  // …
  });

• 1st : le tableau de fonction sera exécuter (attention « fonctionA » et « fonctionB » seront exécutés en même temps).
• 2nd : le contenu de la fonction « nomDeMaFonction » sera exécuté en suivant.
• Lorsque vous envoyez un « gulp » dans votre terminal, la fonction par défaut nommée « default » sera exécuter. Pour pouvoir exécuter une fonction spécifique vous devez faire « gulp nomDeVotreFonction ».
• Terminal : gulp > exécutera en même temps « fonctionA » et « fonctionB », puis le contenu de la fonction « default ».
• Terminal : gulp fonctionA > exécutera uniquement la fonction nommée « fonctionA ».
• Terminal : gulp fonctionB > exécutera uniquement la fonction nommée « fonctionB ».

Créer une fonction pour compiler scss en css :

• Trouver le plugin : https://www.npmjs.com/package/gulp-compass
• Installer gulp-compass.
  Terminal : npm install gulp-compass –save-dev
• Ajouter la « require » :
  var compass = require(‘gulp-compass‘);
• Ajouter la « fonction » :
  gulp.task(‘compass‘, function() {
    gulp.src(‘./sass/**/*.scss‘)
      .pipe(compass({
        css: ‘css‘,
        scss: ‘css‘
      }))
      .pipe(gulp.dest(‘css‘));
  });
• Télécharger le projet

Utiliser gulp pour compiler scss vers css, et minifier le css/js :

• github.com/eewee/eewee-gulp

Où trouver les plugins Gulp ?

• gulpjs.com/plugins

Tuto vidéo sur Gulp ?

• scotch.io

Source : Gulp, compass-style.org