运行任务前的 Gulp 提示

Question

我想在运行底部的主要build 任务之前提示用户。我将 gulp-prompt 视为一种解决方案，但无法在任何任务运行之前弄清楚如何实现它。我希望用户能够在任何运行之前取消整个 build 任务。那可能吗？任何建议将不胜感激。

不确定如何实现.pipe(prompt.confirm())

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

这是整个 gulp 文件

'use strict';

var gulp      = require('gulp');
var config    = require('../config');
var concat    = require('gulp-concat');
var unzip     = require('gulp-unzip');
var minimatch = require('minimatch');
var prompt    = require('gulp-prompt');
var notify    = require('gulp-notify');
var gutil     = require('gulp-util');

/**
 * Build Initial Project File Structure
 *  Docs: https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
 *  Order of Build:
 *      1. 'buildSass': Builds the ./sass directory in root
 *      2. 'buildFonts': Extracts the fonts from .zip and places them in ./fonts directory
 *      3. 'buildFontsCss': Extracts the fonts .css from .zip, concats all.css and places them in ./sass/typography/_fonts.scss directory
 *      4. 'buildJS': Builds the ./js directory in root
 *      5. 'moveCustomJSFiles': Places all js files (from wp _underscore theme) in proper directories
 *      6. run 'gulp build' in terminal to run all 5 tasks in the proper order and create the initial setup for your project
 */

gulp.task('buildSass', function() {
    var stream = gulp.src(config.build.sass.src)
        .pipe(gulp.dest(config.build.sass.dest))
    return stream
        .on('end', function(){ gutil.log(gutil.colors.bgGreen('buildSass Compiled Successfully!')); });
});

gulp.task('buildFonts', ['buildSass'], function() {
    var stream = gulp.src(config.build.fonts.src)
        .pipe(unzip({
            filter: function(entry) {
                return minimatch(entry.path, config.build.fonts.include)
            }
        }))
        .pipe(gulp.dest(config.build.fonts.dest))
    return stream
        .on('end', function(){ gutil.log(gutil.colors.bgGreen('buildFonts Compiled Successfully!')); });
});

gulp.task('buildFontsCss', ['buildFonts'], function() {
    var stream = gulp.src(config.build.fonts.css.src)
        .pipe(unzip({
            filter: function(entry) {
                return minimatch(entry.path, config.build.fonts.css.include)
            }
        }))
        .pipe(concat(config.file.name.fontsSass))
        .pipe(gulp.dest(config.build.fonts.css.dest))
    return stream
        .on('end', function(){ gutil.log(gutil.colors.bgGreen('buildFontsCss Compiled Successfully!')); });
});

gulp.task('buildJS', ['buildFontsCss'], function() {
    var stream = gulp.src(config.build.js.src)
        .pipe(gulp.dest(config.build.js.dest))
    return stream
        .on('end', function(){ gutil.log(gutil.colors.bgGreen('buildJS Compiled Successfully!')); });
});

gulp.task('moveCustomJSFiles', ['buildJS'], function() {
    var stream = gulp.src(config.build.copyJS.src)
        .pipe(gulp.dest(config.build.copyJS.dest))
    return stream
        .on('end', function(){ gutil.log(gutil.colors.bgGreen('moveCustomJSFiles Compiled Successfully!')); })
        .pipe(notify({ message: 'Project Build was successful! ✅', onLast: true }));
});

gulp.task('build', ['buildSass', 'buildFonts', 'buildFontsCss', 'buildJS', 'moveCustomJSFiles']);

// TODO:
// put confirm before run

Answer 1

看看readline-sync。我相信其他人会不同意，但提示是在同步使用 IMO 时通常效果更好的东西之一。

编辑：

以下是根据您的 gulp v4 代码执行此操作的方法：

const readlineSync = require('readline-sync');

gulp.task('build', gulp.series(
  function(done) {
    if (readlineSync.keyInYN('Do you want to build?')) {
      return done();
    }
    console.log('Ok, not building.');
    process.exit(1);
  },
  gulp.parallel(
    'buildSass',
    'buildFonts',
    'buildFontsCss',
    'buildJS',
    'moveCustomJSFiles'
  )
));

使用 gulp 版本 run-sequence 模块代替 gulp.series：

const readlineSync = require('readline-sync');
const runSequence = require('run-sequence');
gulp.task('build-prompt', function(done) {
  if (readlineSync.keyInYN('Do you want to build?')) {
    return done();
  }
  console.log('Ok, not building.');
  process.exit(1);
});

gulp.task('build', function(callback) {
  runSequence(
    'build-prompt',
    [
      'buildSass',
      'buildFonts',
      'buildFontsCss',
      'buildJS',
      'moveCustomJSFiles'
    ],
    callback
  );
});

Answer 2

https://www.npmjs.com/package/gulp-prompt

我自己没有对此进行测试，但文档表明您可以使用“继续？”之类的确认消息提示用户。然后可选择是否继续任务：

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