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 :

Où trouver les plugins Gulp ?

Tuto vidéo sur Gulp ?

Source : Gulpcompass-style.org

Michael

Développeur / intégrateur, travaillant en agence web depuis 2005, je viens à présent vous proposer de venir découvrir mes créations personnelles de plugins / themes pour le CMS Wordpress & Prestashop, quelques solutions en mode SAAS & un peu d'actualité web ( / Twitter).

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.