Passer des variables entre « pipes » dans Gulp

Question

J'essaie d'écrire des tâches gulp qui nécessitent une saisie de l'utilisateur via le plugin d'invite gulp.Mais j'ai du mal à transmettre cette entrée à d'autres, par exemple :

gulp.task('userinput', function(){

    var myVar = 'MONKEY';

    gulp.src('./templates/_component.*')
    .pipe(prompt.prompt([
        {
            type: 'input',
            name: 'userInput',
            message: 'Say something'
        }
    ], function(res){
        myVar = res.userInput;
    }))
    .pipe(prompt.confirm('You said ' + myVar));
});

En supposant que j'entre hello à l'invite, je m'attendais à ce que la confirmation me dise You said Hello, mais ça dit You said MONKEY.

Est-ce possible avec Gulp ?

Answer 1

Le problème ici est que vous créez la deuxième invite ('You said ' + myVar) avant la première invite a été exécutée :

1. Ensemble myVar à 'MONKEY'
2. Créer des flux
   1. Créer src flux, qui est asynchrone
   2. Créez la première invite et ajoutez-la au flux src
   3. Créer une deuxième invite en utilisant la valeur actuelle de myVar, et ajoutez-le au premier flux d'invite
3. Ce n'est que maintenant que les flux exécutés sont traités
   1. Sources de chargement
   2. Exécutez la première invite, définissez le myVar
   3. Exécutez la deuxième invite en utilisant le message généré précédemment

---

La seule solution si vous souhaitez tout conserver sous forme de flux unique est d'utiliser la variable dans quelque chose qui permet une fermeture (fonction).Certains plugins acceptent déjà une fermeture comme argument, mais la plupart ne le font pas.

Une solution pour envelopper un flux dans une fermeture qui fonctionnerait ici est avaler-taper, qui n'est pas spécifiquement conçu pour ce scénario, mais devrait fonctionner.ça ressemble à ça :

var tap = require('gulp-tap');

//...

gulp.task('userinput', function(){

    var myVar = 'MONKEY';

    gulp.src('./templates/_component.*')
    .pipe(prompt.prompt([
        {
            type: 'input',
            name: 'userInput',
            message: 'Say something'
        }
    ], function(res){
        myVar = res.userInput;
    }))
    .pipe(tap(function(file, t) {
        // format is t.through(stream-function, [arguments...])
        return t.through(prompt.confirm, ['You said ' + myVar]);
    });
});

Parce que ceci est enveloppé dans une fermeture et évalué pour chaque fichier, il récupérera le actuel valeur pour la variable. Cependant, comme cela fonctionne sur chaque fichier, vous verrez l'invite une fois pour chaque dossier traité.

---

Une meilleure solution serait de diviser votre tâche en plusieurs tâches dépendantes.Cela ressemblerait à ceci :

var myVar = 'MONKEY';

gulp.task('userinput1', function(){

    return gulp.src('./templates/_component.*', {read: false})
        .pipe(prompt.prompt([
            {
                type: 'input',
                name: 'userInput',
                message: 'Say something'
            }
        ], function(res){
            myVar = res.userInput;
        }));
});

gulp.task('userinput', ['userinput1'], function() {
    return gulp.src('./templates/_component.*')
        .pipe(prompt.confirm('You said ' + myVar));
});

Maintenant, la première tâche (userinput1) s'exécutera et se terminera avant le second est traité (userinput2), donc la variable sera définie correctement.

NOTE: Assurez-vous return le flux de vos tâches, sinon elles sont traitées de manière synchrone et votre variable ne sera pas définie.

---

Enfin, il serait peut-être plus judicieux de renoncer au gulp-prompt tâche dans son ensemble, car cela n'a pas vraiment grand-chose à voir avec le flux.Vous feriez probablement mieux d'utiliser directement Node JavaScript dans votre tâche pour recueillir les entrées de l'utilisateur (de préférence de manière synchrone), puis de traiter vos fichiers dans un flux gulp par la suite.