gulp-prompt入個了門

gulp-prompt版本：0.4.1
源碼:gulp-prompt演示代碼

1、gulp-prompt的簡介

---

gulp-prompt 是一個基於gulp的命令行提示。

咱們能夠用它來完成命令行中互動功能。

2、gulp-prompt的使用

---

1.confirm([options])

第一種使用:

confirm中沒填入任何值的時候，默認顯示Are you sure?

gulp.src('demo.js')
        .pipe(prompt.confirm())
        .pipe(gulp.dest('dest'));

顯示效果:

[14:14:04] Using gulpfile /study/gulpTest/gulpfile.js
[14:14:04] Starting 'confirm:test01'...
[14:14:04] Finished 'confirm:test01' after 8.19 ms
? Are you sure? (y/N)

解釋:若是Yes,則執行pipe(gulp.dest('dest')),若是No,則return。（如下含義同樣）

第二種使用:

confirm中添加字符串就會替換提示的文字。

gulp.src('demo.js')
        .pipe(prompt.confirm('Are you ready for Gulp?'))
        .pipe(gulp.dest('dest'));

顯示效果:

[14:15:00] Using gulpfile /study/gulpTest/gulpfile.js
[14:15:00] Starting 'confirm:test02'...
[14:15:00] Finished 'confirm:test02' after 9.17 ms
? Are you ready for Gulp? (y/N)

第三種使用:

confirm中寫入一個對象，包括message和default兩個字段

• message：顯示的文字
• default: 設置不填寫時候的默認狀態

gulp.src('demo.js')
        .pipe(prompt.confirm({
          message: 'Continue?',
          default: true
        }))
        .pipe(gulp.dest('dest'));

顯示效果:

[14:22:24] Using gulpfile /study/gulpTest/gulpfile.js
[14:22:24] Starting 'confirm:test03'...
[14:22:24] Finished 'confirm:test03' after 8.49 ms
? Continue? (Y/n)

2.prompt(questions, callback)

input模式:自定義輸入信息

gulp.src('demo.js')
          .pipe(prompt.prompt({
            type: 'input',
            name: 'task',
            message: 'Which task would you like to run?'
          }, function(res){
            //value is in res.task (the name option gives the key)
            console.log('輸入:', res.task);
          }));

顯示效果:

checkbox模式:經過空格勾選

gulp.src('demo.js')
          .pipe(prompt.prompt({
            type: 'checkbox',
            name: 'bump',
            message: 'What type of bump would you like to do?',
            choices: ['patch', 'minor', 'major']
          }, function(res){
            //value is in res.bump (as an array)
            console.log('選中:', res.bump);
          }));

顯示效果:

password模式:輸入部分隱藏看不見

gulp.src('demo.js')
          .pipe(prompt.prompt({
            type: 'password',
            name: 'pass',
            message: 'Please enter your password'
          }, function(res){
            //value is in res.pass
            console.log('密碼:', res.pass);
          }));

顯示效果:

多層級輸入模式:相似一個問題接着一個問題

gulp.src('demo.js')
          .pipe(prompt.prompt([{
            type: 'input',
            name: 'first',
            message: 'First question?'
          },
          {
            type: 'input',
            name: 'second',
            message: 'Second question?'
          }], function(res){
            //value is in res.first and res.second
            console.log('輸入:', res.first, res.second);
          }));

顯示效果:

驗證:對輸入或者選中的值進行驗證

gulp.src('demo.js')
          .pipe(prompt.prompt({
            type: 'input',
            name: 'inputName',
            message: 'Please enter your name',
            validate: function(inputName){
        
              if(pass !== 'zqz'){
                return false;
              }
        
              return true;
            }
          }, function(res){
            //value is in res.pass
            console.log('輸入:', res.pass);
          }));

顯示效果: