Passer le paramètre à la tâche Gulp


194

Normalement, nous pouvons exécuter la tâche gulp à partir de la console via quelque chose comme gulp mytask. Existe-t-il de toute façon que je peux passer un paramètre à une tâche de gorgée? Si possible, veuillez montrer par exemple comment cela peut être fait.



Réponses:


269

C'est une fonctionnalité dont les programmes ne peuvent pas se passer. Vous pouvez essayer des yargs .

npm install --save-dev yargs

Vous pouvez l'utiliser comme ceci:

gulp mytask --production --test 1234

Dans le code, par exemple:

var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;

Pour votre compréhension:

> gulp watch
console.log(argv.production === undefined);  <-- true
console.log(argv.test === undefined);        <-- true

> gulp watch --production
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- true
console.log(argv.test);                      <-- undefined

> gulp watch --production --test 1234
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- false
console.log(argv.test);                      <-- 1234

J'espère que vous pourrez le prendre d'ici.

Il existe un autre plugin que vous pouvez utiliser, minimist. Il y a un autre article où il y a de bons exemples pour les yargs et les minimistes: ( Est-il possible de passer un drapeau à Gulp pour qu'il exécute les tâches de différentes manières? )


13
Réponse vraiment bien écrite, merci pour les exemples!
Allen Rice

comment accède-t-on à cela en javascript?
vini

Si vous utilisez gulp avec yargs, notez ce qui suit: Si vous avez une tâche 'client' et que vous ne souhaitez pas utiliser la construction yargs dans Parameter vérifiant les commandes requises: commande ("client", "Créer un répertoire client")
suther

Voir mon commentaire ci-dessous, si vous souhaitez utiliser le yargs intégré dans la vérification des paramètres pour les «commandes» requises avec gulp: stackoverflow.com/a/41412558/1256697
1er

5
(argv.production === undefined) ? false : true;est équivalent à argv.production !== undefined.
CJStuart

136

Si vous voulez éviter d'ajouter des dépendances supplémentaires, j'ai trouvé les nœuds process.argvutiles:

gulp.task('mytask', function() {
    console.log(process.argv);
});

Donc, ce qui suit:

gulp mytask --option 123

devrait afficher:

[ 'node', 'path/to/gulp.js', 'mytask', '--option', '123']

Si vous êtes sûr que le paramètre souhaité est dans la bonne position, les drapeaux ne sont pas nécessaires. ** Utilisez simplement (dans ce cas):

var option = process.argv[4]; //set to '123'

MAIS: comme l'option peut ne pas être définie, ou peut être dans une position différente, je pense qu'une meilleure idée serait quelque chose comme:

var option, i = process.argv.indexOf("--option");
if(i>-1) {
    option = process.argv[i+1];
}

De cette façon, vous pouvez gérer des variations dans plusieurs options, comme:

//task should still find 'option' variable in all cases
gulp mytask --newoption somestuff --option 123
gulp mytask --option 123 --newoption somestuff
gulp mytask --flag --option 123

** Edit: vrai pour les scripts de noeud, mais gulp interprète n'importe quoi sans "-" en tête comme autre nom de tâche. Donc, l'utilisation gulp mytask 123échouera car gulp ne peut pas trouver une tâche appelée '123'.


1
Il y a une faute de frappe dans "var option, i = process, argv.indexOf (" - option ");". Je pense que ce devrait être proccess.argv.
Luis Paulo Lohmann

Ah, donc ça devrait. Corrigée. Merci @luis
Trevedhek

Je voulais juste vérifier l'indicateur --dev, afin de pouvoir distinguer la production des environnements inférieurs. Cela fait l'affaire sans ajouter de dépendances supplémentaires. Remercier!
b01

1
Pour moi, les gulp myTask --productionrésultats sont process.argvégaux à[pathToNode, pathToGulp, 'myTask', '--production']
Sung Cho

2
Cela a probablement changé, j'ai vu de vieux exemples avec la même différence. Quoi qu'il en soit, vous pouvez simplement le déboguer et voir votre cas. Cela devrait être la réponse acceptée car elle n'a aucune dépendance.
Juan

19

Passer un paramètre à gulp peut signifier plusieurs choses:

  • De la ligne de commande au gulpfile (déjà illustré ici).
  • Du corps principal du script gulpfile.js aux tâches gulp.
  • D'une tâche de gorgée à une autre tâche de gorgée.

Voici une approche de passage de paramètres du fichier gulp principal à une tâche gulp. En déplaçant la tâche qui a besoin du paramètre vers son propre module et en l'enveloppant dans une fonction (afin qu'un paramètre puisse être passé):

// ./gulp-tasks/my-neat-task.js file
module.exports = function(opts){

  opts.gulp.task('my-neat-task', function(){
      console.log( 'the value is ' + opts.value );
  });

};
//main gulpfile.js file

//...do some work to figure out a value called val...
var val = 'some value';

//pass that value as a parameter to the 'my-neat-task' gulp task
require('./gulp-tasks/my-neat-task.js')({ gulp: gulp, value: val});

Cela peut être utile si vous avez beaucoup de tâches de gorgée et que vous souhaitez leur passer des configurations environnementales pratiques. Je ne sais pas si cela peut fonctionner entre une tâche et une autre.


16

Il existe une recette officielle de gorgée pour cela en utilisant minimist .

https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

Les bases utilisent minimist pour séparer les arguments cli et les combiner avec des options connues:

var options = minimist(process.argv.slice(2), knownOptions);

Ce qui analyserait quelque chose comme

$ gulp scripts --env development

Plus d'informations complètes dans la recette.


1
Pourquoi les ordures en haut de la liste et la bonne solution en bas ne sont-elles pas votées? soupir
DDD

14

Si vous souhaitez également utiliser des paramètres d'environnement et d'autres utilitaires tels que log, vous pouvez utiliser gulp-util

/* 
  $npm install gulp-util --save-dev
  $gulp --varName 123
*/
var util = require('gulp-util');
util.log(util.env.varName);

Mettre à jour

gulp-util est désormais obsolète. Vous pouvez utiliser minimist à la place.

var argv = require('minimist')(process.argv.slice(2));
console.dir(argv);

1
gulp-util est obsolète depuis 2016
valdeci

5

@ La réponse d'Ethan fonctionnerait complètement. D'après mon expérience, la manière la plus nœud est d'utiliser des variables d'environnement. C'est un moyen standard de configurer des programmes déployés sur des plateformes d'hébergement (par exemple Heroku ou Dokku).

Pour passer le paramètre à partir de la ligne de commande, procédez comme suit:

Développement: gulp dev

Production: NODE_ENV=production gulp dev

La syntaxe est différente, mais très Unix, et elle est compatible avec Heroku, Dokku, etc.

Vous pouvez accéder à la variable dans votre code à process.env.NODE_ENV

MYAPP=something_else gulp dev

mettrait

process.env.MYAPP === 'something_else'

Cette réponse pourrait vous donner d'autres idées.


4

Voici mon exemple d'utilisation. Pour la tâche css / less. Peut être appliqué pour tous.

var cssTask = function (options) {
  var minifyCSS = require('gulp-minify-css'),
    less = require('gulp-less'),
    src = cssDependencies;

  src.push(codePath + '**/*.less');

  var run = function () {
    var start = Date.now();

    console.log('Start building CSS/LESS bundle');

    gulp.src(src)
      .pipe(gulpif(options.devBuild, plumber({
        errorHandler: onError
      })))
      .pipe(concat('main.css'))
      .pipe(less())
      .pipe(gulpif(options.minify, minifyCSS()))
      .pipe(gulp.dest(buildPath + 'css'))
      .pipe(gulpif(options.devBuild, browserSync.reload({stream:true})))
      .pipe(notify(function () {
        console.log('END CSS/LESS built in ' + (Date.now() - start) + 'ms');
      }));
  };

  run();

  if (options.watch) {
    gulp.watch(src, run);
  }
};

gulp.task('dev', function () {
  var options = {
    devBuild: true,
    minify: false,
    watch: false
  };

  cssTask (options);
});

3

Voici une autre façon sans modules supplémentaires:

J'avais besoin de deviner l'environnement à partir du nom de la tâche, j'ai une tâche «dev» et une tâche «prod».

Lorsque je l'exécute, gulp prodil doit être défini sur environnement prod. Lorsque je cours gulp devou quoi que ce soit d'autre, il doit être défini sur environnement de développement.

Pour cela, je vérifie simplement le nom de la tâche en cours d'exécution:

devEnv = process.argv[process.argv.length-1] !== 'prod';

2

Si vous utilisez gulp avec yargs, notez ce qui suit:

Si vous avez une tâche «client» et que vous ne souhaitez pas utiliser la construction yargs dans la vérification des paramètres pour les commandes requises:

.command("customer <place> [language]","Create a customer directory") appelez-le avec:

gulp customer --customer Bob --place Chicago --language english

yargs lancera toujours une erreur, qu'il n'y a pas assez de commandes assignées à l'appel, même si vous l'avez !! -

Essayez-le et ajoutez seulement un chiffre à la commande (pour la rendre différente du nom de la tâche gulp) ... et cela fonctionnera:

.command("customer1 <place> [language]","Create a customer directory")

Cela est dû au fait que gulp semble déclencher la tâche, avant que yargs ne puisse vérifier ce paramètre requis. Cela m'a coûté des heures supplémentaires pour comprendre cela.

J'espère que cela vous aide ..


0

Je sais que je suis en retard pour répondre à cette question, mais je voudrais ajouter quelque chose à la réponse de @Ethan, la réponse la plus votée et acceptée.

Nous pouvons utiliser yargspour obtenir le paramètre de ligne de commande et avec cela, nous pouvons également ajouter notre propre alias pour certains paramètres comme Follow.

var args = require('yargs')
    .alias('r', 'release')
    .alias('d', 'develop')
    .default('release', false)
    .argv;

Veuillez consulter ce lien pour plus de détails. https://github.com/yargs/yargs/blob/HEAD/docs/api.md

Voici l'utilisation de l'alias comme indiqué dans la documentation de yargs. Nous pouvons également y trouver plus de yargsfonctions et rendre l'expérience de passage de ligne de commande encore meilleure.

.alias (clé, alias)

Définissez des noms de clés comme équivalents de sorte que les mises à jour d'une clé se propagent aux alias et vice versa.

Facultativement .alias () peut prendre un objet qui mappe les clés aux alias. Chaque clé de cet objet doit être la version canonique de l'option, et chaque valeur doit être une chaîne ou un tableau de chaînes.


-2

Il suffit de le charger dans un nouvel objet sur le processus .. process.gulp = {}et de voir la tâche là-bas.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.