問題描述

我正在嘗試編寫一個(gè) gulp 任務(wù)，該任務(wù)通過 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));
});

假設(shè)我在提示符處輸入 hello，我希望確認(rèn)會說 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 可以做到這一點(diǎn)嗎?

Is this possible with Gulp?

推薦答案

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

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

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

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

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

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í)>

如果您想將其全部保留為單個(gè)流，唯一的解決方案是在允許閉包(函數(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，它不是專門為這種情況設(shè)計(jì)的，但應(yīng)該可以工作.它看起來像這樣:

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

因?yàn)樗话b在一個(gè)閉包中，并且針對每個(gè)文件進(jìn)行評估，所以它將獲取變量的 current 值.但是，因?yàn)樗m用于每個(gè)文件，所以您會看到處理 每個(gè) 文件的提示一次.

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.

更好的解決方案是將您的任務(wù)分成多個(gè)相互依賴的任務(wù).看起來像這樣:

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)在第一個(gè)任務(wù) (userinput1) 將運(yùn)行并完成在第二個(gè)任務(wù)被處理 (userinput2)，所以變量將是設(shè)置正確.

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

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

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

<小時(shí)>

最后，完全放棄 gulp-prompt 任務(wù)可能更有意義，因?yàn)樗c流沒有太大關(guān)系.您最好在任務(wù)中直接使用 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)！