gulp Tutoriel
Commencer avec gulp

Remarques

Versions

Installation ou configuration

1. Installez Node.js et NPM:

Gulp nécessite Node.js et NPM, le gestionnaire de paquets de Node. La plupart des installateurs incluent NPM avec Node.js. Reportez-vous à la documentation d'installation ou confirmez qu'elle est déjà installée 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é globalement une version de gulp, lancez npm rm --global gulp pour vous assurer que votre ancienne version n'entre pas en conflit avec gulp-cli .

$ npm install --global gulp-cli

3. Initialisez votre répertoire de projet:

$ npm init

4. Installez gulp dans votre devdependencies de 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écuter gulp:

$ 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> .

Dépendance de la tâche

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

Ce paramètre est un tableau de tâches à exécuter et à terminer avant l'exécution de votre tâche:

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']);

Note: Les tâches s'exécuteront en parallèle (toutes en même temps), donc ne supposez pas que les tâches vont commencer / finir dans l'ordre. À partir de gulp v4 , gulp.series() doit être utilisé si l’ordre d’exécution des tâches de dépendance est important.

Concat fichier js dans le sous-dossier en utilisant 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'));
});

Documents CLI gulp

Les drapeaux

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

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

La CLI ajoute process.env.INIT_CWD, cwd d'origine à partir duquel elle a été lancée.

Drapeaux spécifiques à la tâche

Reportez-vous à ce lien StackOverflow pour savoir comment ajouter des indicateurs spécifiques à une tâche.

les tâches

Les tâches peuvent être exécutées en exécutant gulp <task> <othertask> . Il suffit d'exécuter gulp pour exécuter la tâche que vous avez enregistrée, appelée default . S'il n'y a pas de tâche default , gulp sera une erreur.

Compilateurs

Vous pouvez trouver une liste des langues prises en charge à interpréter . Si vous souhaitez ajouter une prise en charge pour une nouvelle langue, envoyez des requêtes d'ouverture / des problèmes d'ouverture.