gulpCommencer avec gulp


Remarques

Gulp est un système de compilation JavaScript, basé sur node.js comme Grunt. Il vous permet d'automatiser les tâches courantes pendant votre processus de développement. Gulp utilise les flux -concept et code-over-configuration pour un processus de construction plus simple et plus intuitif. Le concept de codage par configuration permet de créer des tâches plus lisibles et plus simples, tandis que les tâches sont très sur-configurées.

Versions

Version Date de sortie
3.4 2014-01-17
3.7 2014-06-01
3.8 2014-06-10
3,9 2015-06-02
3.9.1 2016-02-09
4.0.0 2016-06-21

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.

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.