問題描述

我正在嘗試編寫一個 gulp 任務，該任務通過 gulp-prompt 插件獲取一些用戶輸入.但我無法將該輸入傳遞給其他例如:

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

假設我在提示符處輸入 hello，我希望確認會說 You said Hello，但它說的是 You said MONKEY.

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

Gulp 可以做到這一點嗎?

Is this possible with Gulp?

推薦答案

這里的問題是你正在創(chuàng)建第二個提示 ('You said ' + myVar) before 第一個提示已執(zhí)行:

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

1. 將 myVar 設置為 'MONKEY'
2. 創(chuàng)建信息流

1. Set myVar to 'MONKEY'
2. Create streams

1. 創(chuàng)建 src 流，這是異步的
2. 創(chuàng)建第一個提示，并將其添加到 src 流中
3. 使用 myVar 的當前值創(chuàng)建第二個提示，并將其添加到第一個提示流中

1. Create src stream, 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

<小時>

如果您想將其全部保留為單個流，唯一的解決方案是在允許閉包(函數(shù))的東西中使用變量.一些插件已經(jīng)接受閉包作為參數(shù)，但大多數(shù)不接受.

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.

將流包裝在閉包中的一種解決方案是 gulp-tap，它不是專門為這種情況設計的，但應該可以工作.它看起來像這樣:

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:

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

因為它被包裝在一個閉包中，并且針對每個文件進行評估，所以它將獲取變量的 current 值.但是，因為它適用于每個文件，所以您會看到處理 每個 文件的提示一次.

Because this is wrapped in a closure, and evaluated for each file, it will pick up the current value for the variable. However, because it works on each file, you'll see the prompt once for each file 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));
});

現(xiàn)在第一個任務 (userinput1) 將運行并完成在第二個任務被處理 (userinput2)，所以變量將是設置正確.

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

注意:確保從您的任務中return流，否則它們會被同步處理，并且您的變量不會被設置.

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

<小時>

最后，完全放棄 gulp-prompt 任務可能更有意義，因為它與流沒有太大關(guān)系.您最好在任務中直接使用 Node JavaScript 來收集用戶的輸入(最好以同步方式)，然后在 gulp-stream 中處理您的文件.

Finally, it might make more sense to forgo the gulp-prompt task 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.

這篇關(guān)于在“管道"之間傳遞變量在吞咽的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！