Passa il parametro all'attività Gulp


194

Normalmente possiamo eseguire gulp task dalla console tramite qualcosa di simile gulp mytask. Esiste un modo per passare il parametro al gulp task? Se possibile, si prega di mostrare esempio come può essere fatto.



Risposte:


269

È una caratteristica che i programmi non possono rimanere senza. Puoi provare gli yarg .

npm install --save-dev yargs

Puoi usarlo in questo modo:

gulp mytask --production --test 1234

Nel codice, ad esempio:

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

Per la tua comprensione:

> 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

Spero che tu possa prenderlo da qui.

C'è un altro plugin che puoi usare, minimista. C'è un altro post in cui ci sono buoni esempi sia per gli yarg che per il minimista: ( È possibile passare un flag a Gulp per farlo eseguire in diversi modi? )


13
Risposta davvero ben scritta, grazie per gli esempi!
Allen Rice,

come si accede a questo in JavaScript?
vini

Se usi gulp con yargs, nota quanto segue: Se hai un'attività 'cliente' e non vuoi usare la compilazione di yargs in Parametro che controlla i comandi richiesti: comando ("cliente", "Crea una directory cliente")
suther

Vedere il mio commento qui sotto, se si desidera utilizzare le yargs costruito nel controllo dei parametri di 'comandi' richiesti insieme a fiato: stackoverflow.com/a/41412558/1256697
Suther

5
(argv.production === undefined) ? false : true;è equivalente a argv.production !== undefined.
JimmyMcHoverover

136

Se vuoi evitare di aggiungere dipendenze extra, ho trovato utili i nodi process.argv:

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

Quindi il seguente:

gulp mytask --option 123

dovrebbe visualizzare:

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

Se sei sicuro che il parametro desiderato sia nella posizione giusta, i flag non sono necessari. ** Usa solo (in questo caso):

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

MA: poiché l'opzione potrebbe non essere impostata o potrebbe trovarsi in una posizione diversa, ritengo che un'idea migliore sarebbe qualcosa del tipo:

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

In questo modo, puoi gestire le variazioni in più opzioni, come:

//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

** Modifica: vero per gli script del nodo, ma gulp interpreta qualsiasi cosa senza un "-" iniziale come un altro nome di attività. Quindi l'utilizzo gulp mytask 123fallirà perché gulp non riesce a trovare un'attività chiamata '123'.


1
C'è un errore di battitura in "opzione var, i = process, argv.indexOf (" - opzione ");". Credo che dovrebbe essere proccess.argv.
Luis Paulo Lohmann,

Ah, così dovrebbe. Corretto. Grazie @luis
Trevedhek,

Volevo solo controllare la bandiera --dev, in modo da poter distinguere tra produzione e ambienti inferiori. Questo fa il trucco senza aggiungere dipendenze extra. Grazie!
b01,

1
Per me, gulp myTask --productionrisulta process.argvuguale a[pathToNode, pathToGulp, 'myTask', '--production']
Sung Cho

2
Probabilmente è cambiato, ho visto alcuni vecchi esempi con la stessa differenza. Ad ogni modo, puoi semplicemente eseguirne il debug e vedere il tuo caso. Questa dovrebbe essere la risposta accettata in quanto non ha dipendenze.
Juan,

19

Passare un parametro a gulp può significare alcune cose:

  • Dalla riga di comando al gulpfile (già esemplificato qui).
  • Dal corpo principale dello script gulpfile.js alle attività gulp.
  • Da un'attività di gulp a un'altra attività di gulp.

Ecco un approccio per passare i parametri dal file gulp principale a un'attività gulp. Spostando l'attività che ha bisogno del parametro sul proprio modulo e racchiudendola in una funzione (quindi un parametro può essere passato) .:

// ./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});

Questo può tornare utile se hai molti compiti da sbrigare e vuoi passare loro alcune pratiche configurazioni ambientali. Non sono sicuro che possa funzionare tra un'attività e un'altra.


16

C'è una ricetta ufficiale per questo sorso usando minimist .

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

Le basi utilizzano minimist per separare gli argomenti cli e combinarli con opzioni note:

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

Che analizzerebbe qualcosa del genere

$ gulp scripts --env development

Informazioni più complete nella ricetta.


1
Perché la spazzatura in cima all'elenco e la soluzione corretta in fondo non vengono votate? sospiro
DDD,

14

Se si desidera utilizzare i parametri di ambiente e altri programmi di utilità, come ad esempio il registro, è possibile utilizzare gulp-util

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

Aggiornare

gulp-util è ora obsoleto. Puoi invece usare il minimista .

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

1
gulp-util è obsoleto dal 2016
valdeci,

5

La risposta di Ethan funzionerebbe completamente. Dalla mia esperienza, il modo più nodo è quello di utilizzare le variabili di ambiente. È un modo standard per configurare i programmi distribuiti su piattaforme di hosting (ad esempio Heroku o Dokku).

Per passare il parametro dalla riga di comando, farlo in questo modo:

Sviluppo: gulp dev

Produzione: NODE_ENV=production gulp dev

La sintassi è diversa, ma molto Unix, ed è compatibile con Heroku, Dokku, ecc.

Puoi accedere alla variabile nel tuo codice all'indirizzo process.env.NODE_ENV

MYAPP=something_else gulp dev

sarebbe impostato

process.env.MYAPP === 'something_else'

Questa risposta potrebbe darti qualche altra idea.


4

Ecco il mio esempio su come lo uso. Per l'attività css / less. Può essere applicato a tutti.

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

Ecco un altro modo senza moduli extra:

Avevo bisogno di indovinare l'ambiente dal nome dell'attività, ho un'attività "dev" e un'attività "prod".

Quando corro gulp prod, dovrebbe essere impostato su prod ambiente. Quando corro gulp devo qualsiasi altra cosa dovrebbe essere impostato su dev environment.

Per questo controllo solo il nome dell'attività in esecuzione:

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

2

Se usi gulp con yargs, nota quanto segue:

Se hai un'attività 'cliente' e non vuoi usare yargs compilato in Controllo parametri per i comandi richiesti:

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

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

yargs genererà comunque un errore, che non ci sono abbastanza comandi assegnati alla chiamata, anche se lo hai !! -

Provalo e aggiungi solo una cifra al comando (per renderlo non uguale al nome del compito gulp) ... e funzionerà:

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

Questa è la causa di gulp che sembra attivare l'attività, prima che yargs sia in grado di verificare questo parametro richiesto. Mi è costato ore sorprendenti per capirlo.

Spero che questo ti aiuti ..


0

So di essere in ritardo per rispondere a questa domanda, ma vorrei aggiungere qualcosa per rispondere a @Ethan, la risposta più votata e accettata.

Possiamo usare yargsper ottenere il parametro della riga di comando e con ciò possiamo anche aggiungere il nostro alias per alcuni parametri come follow.

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

Si prega di fare riferimento a questo link per maggiori dettagli. https://github.com/yargs/yargs/blob/HEAD/docs/api.md

Di seguito è riportato l'uso dell'alias come indicato nella documentazione di yargs. Possiamo anche trovare più yargsfunzioni lì e rendere l'esperienza di passaggio della riga di comando ancora migliore.

.alias (chiave, alias)

Impostare i nomi delle chiavi come equivalenti in modo tale che gli aggiornamenti di una chiave si propaghino agli alias e viceversa.

Facoltativamente .alias () può prendere un oggetto che mappa le chiavi sugli alias. Ogni chiave di questo oggetto dovrebbe essere la versione canonica dell'opzione e ogni valore dovrebbe essere una stringa o una matrice di stringhe.


-2

Basta caricarlo in un nuovo oggetto durante il processo .. process.gulp = {}e fare in modo che l'attività guardi lì.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.