javascript 在 Gulp 中的“管道”之间传递变量

Passing variables between "pipes" in Gulp

提问by gargantuan

I'm trying to write a gulp tasks that takes some user input via the gulp-prompt plugin. But I'm having trouble passing that input along to other eg:

我正在尝试编写一个 gulp 任务，通过gulp-prompt 插件获取一些用户输入。但是我无法将该输入传递给其他人，例如：

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

Assuming I enter helloat the prompt, I was expecting the confirmation to say You said Hello, but it says You said MONKEY.

假设我hello在提示下输入，我期待确认说You said Hello，但它说You said MONKEY。

Is this possible with Gulp?

这可以用 Gulp 实现吗？

回答by OverZealous

The issue here is that you are creating the second prompt ('You said ' + myVar) beforethe first prompt has been executed:

这里的问题是您在执行第一个提示之前创建了第二个提示 ( 'You said ' + myVar) ：

1. Set myVarto 'MONKEY'
2. Create streams
   1. Create srcstream, which is asynchronous
   2. Create first prompt, and add it to the src stream
   3. Create second prompt using current value of myVar, and add it to the first prompt stream
3. Only now are the streams executed processed
   1. Load sources
   2. Run first prompt, set the myVar
   3. Run the second prompt using previously generated message

1. 设置myVar为'MONKEY'
2. 创建流
   1. 创建src流，这是异步的
   2. 创建第一个提示，并将其添加到 src 流
   3. 使用 的当前值创建第二个提示myVar，并将其添加到第一个提示流
3. 现在才处理执行的流
   1. 加载源
   2. 运行第一个提示，设置 myVar
   3. 使用先前生成的消息运行第二个提示

---

---

The only solution if you want to keep it all as a single stream is to use the variable within something that allows for a closure (function). Some plugins already accept a closure as an argument, but most don't.

如果您想将其全部保留为单个流，唯一的解决方案是在允许闭包（函数）的内容中使用该变量。一些插件已经接受闭包作为参数，但大多数不接受。

One solution to wrap a stream in a closure that would work here is gulp-tap, which isn't designed for this scenario specifically, but should work. it looks like this:

将流包装在闭包中的一种解决方案是gulp-tap，它不是专门为这种情况设计的，但应该可以工作。它看起来像这样：

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

Because this is wrapped in a closure, and evaluated for each file, it will pick up the currentvalue for the variable. However, because it works on each file, you'll see the prompt once for eachfile processed.

因为它包含在一个闭包中，并为每个文件进行评估，所以它将获取变量的当前值。 然而，因为它的工作原理上的每个文件，你会看到提示，一旦各处理的文件。

---

---

An better solution would be to separate your task into multiple, dependent tasks. That would look something like this:

更好的解决方案是将您的任务分成多个相关的任务。那看起来像这样：

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

Now the first task (userinput1) will run and complete beforethe second one is processed (userinput2), so the variable will be set correctly.

现在第一个任务 ( userinput1) 将在处理第二个任务 ( )之前运行并完成userinput2，因此将正确设置变量。

NOTE:Make sure you returnthe stream from your tasks, otherwise they are processed synchronously, and your variable won't get set.

注意：确保您return的任务中的流，否则它们会被同步处理，并且您的变量将不会被设置。

---

---

Finally, it might make more sense to forgo the gulp-prompttask altogether, because it doesn't really have much to do with the stream. You'd probably be better off using straight Node JavaScript within your task to gather the user's input (preferably in a synchronous manner), then processing your files in a gulp-stream after that.

最后，gulp-prompt完全放弃任务可能更有意义，因为它与流并没有太大关系。您最好在您的任务中直接使用 Node JavaScript 来收集用户的输入（最好以同步方式），然后在此之后以 gulp-stream 处理您的文件。