Commencer avec gulp

Dépendance des tâches

Vous pouvez exécuter des tâches en série, en passant un second paramètre à gulp.task().

Ce paramètre est un tableau de tâches à exécuter et à terminer avant que votre tâche ne s’exécute :

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

Vous pouvez également omettre la fonction si vous souhaitez uniquement exécuter un ensemble de tâches de dépendance :

gulp.task('build', ['array', 'of', 'task', 'names']);

Remarque : Les tâches s’exécuteront en parallèle (toutes en même temps), alors ne présumez pas que les tâches commenceront/se termineront dans l’ordre. Démarrage de gulp v4, gulp.series() doit être utilisé si l’ordre d’exécution des tâches de dépendance est important.

Installation ou configuration

1. Installez Node.js et NPM :

Gulp nécessite Node.js et NPM, le gestionnaire de packages de Node. La plupart des installateurs incluent NPM avec Node.js. [Reportez-vous à la documentation d’installation] (https://www.wikiod.com/fr/node-js/installation-de-nodejs) ou confirmez qu’il est déjà installé en exécutant la commande suivante dans votre terminal,

npm -v
// will return NPM version or error saying command not found

2. Installez gulp globalement :

Si vous avez déjà installé une version de gulp globalement, veuillez exécuter npm rm --global gulp pour vous assurer que votre ancienne version n’entre pas en collision avec gulp-cli.

$ npm install --global gulp-cli

3. Initialisez votre répertoire de projet :

$ npm init

4. Installez gulp dans les devDependencies de votre projet :

$ npm install --save-dev gulp

5. Créez un fichier gulpfile.js à la racine de votre projet :

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Exécutez une gorgée :

$ gulp

La tâche par défaut s’exécutera et ne fera rien.

Pour exécuter des tâches individuelles, utilisez gulp <task> <othertask>.

Concat fichier js dans le sous-dossier à l’aide de gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

gulp CLI docs

Drapeaux

gulp a très peu de drapeaux à connaître. Tous les autres indicateurs sont destinés aux tâches à utiliser si nécessaire.

  • -v ou --version affichera les versions globales et locales de gulp
  • --require <chemin du module> nécessitera un module avant d’exécuter le fichier gulp. Ceci est utile pour les transpilers mais a également d’autres applications. Vous pouvez utiliser plusieurs drapeaux --require
  • --gulpfile <chemin du fichier gulp> définira manuellement le chemin du fichier gulp. Utile si vous avez plusieurs fichiers gulp. Cela définira également le CWD sur le répertoire gulpfile
  • --cwd <dir path> définira manuellement le CWD. La recherche du fichier gulp, ainsi que la relativité de tous les besoins se fera à partir d’ici
  • -T ou --tasks affichera l’arborescence des dépendances des tâches pour le fichier gulp chargé
  • --tasks-simple affichera une liste de tâches en clair pour le fichier gulp chargé
  • --color forcera les plugins gulp et gulp à afficher les couleurs même lorsqu’aucun support de couleur n’est détecté
  • --no-color forcera les plugins gulp et gulp à ne pas afficher les couleurs même lorsque le support des couleurs est détecté
  • --silent désactivera tous les journaux de gulp

La CLI ajoute process.env.INIT_CWD qui est le cwd d’origine à partir duquel il a été lancé.

Drapeaux spécifiques à une tâche

Reportez-vous à ce [StackOverflow](http://stackoverflow.com/questions/23023650/is-it-possible-to-pass-a-flag-to-gulp-to-have-it-run-tasks-in-different -ways) lien pour savoir comment ajouter des indicateurs spécifiques à une tâche

Tâches

Les tâches peuvent être exécutées en exécutant gulp <task> <othertask>. Le simple fait d’exécuter gulp exécutera la tâche que vous avez enregistrée appelée default. S’il n’y a pas de tâche “par défaut”, gulp générera une erreur.

Compilateurs

Vous pouvez trouver une liste des langues prises en charge sur interpret. Si vous souhaitez ajouter la prise en charge d’une nouvelle langue, envoyez-y une demande d’extraction/des problèmes ouverts.