Gulp

Gulp est un automatisateur de taches, “task runner”. Il est utilisé avec npm.
Un tutoriel video pour commencer Tutoriel Gulp sur youtube
La page gulp officielle Getting started

Prérequis et installation

  1. Installer nodejs qui inclut npm. Il existe un installer windows à l'adresse https://nodejs.org/en/ donc c'est très simple!
  2. Installer gulp en global pour l'avoir en ligne de commande
    npm install --global gulp-cli
  3. Installer gulp dans le répertoire de mon projet et l'enregistrer dans les dépendances de mon projet
    npm install --save-dev gulp

    On trouve alors le répertoire gulp dans le répertoire node_modules. Et dans le fichier package.json a été ajouté la dépendance à gulp:

    {
      "name": "elisabeth",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "jquery": "^2.2.1"
      },
      "devDependencies": {
        "browserify": "^13.0.0",
        "gulp": "^3.9.1"
      }
    }

  4. Créer un fichier gulpfile.js à la racine de mon projet avec une tache default.
    var gulp = require('gulp');
    
    gulp.task('default', function() {
      console.log("Ne fait rien");
    });
    
  5. Lancer un gulp en commande en ligne, pour lancer la tache

Un exemple : gulp-minify

Création d'une tache automatique de minimisation d'un fichier js.
Il faut trouver dans la librairie npm, l'outil qui convient par exemple https://www.npmjs.com/package/gulp-minify

Installation

Dans le répertoire de mon projet

npm install --save-dev gulp-minify

De la même façon que précédemment pour l'installation locale de gulp, on trouve le répertoire gulp-minify dans le répertoire node_modules. Et dans le fichier package.json a été ajoutée la dépendance à gulp-minify.

Edition du fichier gulpfile.js

var gulp = require("gulp");
//j'ajoute minify
var minify = require("gulp-minify");


gulp.task("default", function() {
  console.log("Ne fait rien");
});

//ajout d'une tache
gulp.task("compress",function(){
    //fichier src
    gulp.src("src/main.js")
    //tache
    .pipe(minify())
    //destination
    .pipe(gulp.dest("dist"))
});

Utilisation

On n'a plus qu'à taper

gulp compress


La tache est alors exécutée et le résultat envoyer dans un fichier dist/main-min.js

Automatisation avec gulp.watch

Avec la méthode watch, on peut surveiller les modifications dans les fichiers, et lancer alors les taches souhaitées à chaque modification.

gulp.task("watch", function(){
    //exécuter la tache "compress" à chaque modification de src/main.js
    gulp.watch("src/main.js",["compress"]);
})
On n'a plus qu'à lancer watch, pour qu'à chaque modification de mon fichier main.js, il me le recompresse dans main-min.js:

—-

Elisabeth Pointal 27/02/2016 16:38