CODEWITHSUNDEEP
javascriptgulp
MoxDev
MoxDev

Reputation: 51

Gulp prompt before running a task

Id like to prompt the user before running the main build task at the bottom. I was looking at gulp-prompt as a solution but cant figure out how to implement it before any of the tasks run. I want the user to be able to cancel the entire build task before anything runs. Is that possible? Any suggestions would be greatly appreciated.

Not sure how to implement the .pipe(prompt.confirm())

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

Here is the entire gulp file

'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

Upvotes: 1

Views: 3113

Answers (2)

AndyPerlitch
AndyPerlitch

Reputation: 4729

Take a look at readline-sync. I'm sure others will disagree, but prompts are one of those things that often work better when used synchronously IMO.

EDIT:

Here's how you would do it based on your code with 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'
  )
));

With gulp version <4, you can use the run-sequence module instead of 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
  );
});

Upvotes: 2

Jake Wilson
Jake Wilson

Reputation: 91213

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

I haven't tested this myself but the documentation indicates you can prompt the user with a confirmation message like "Continue?" and then optionally continue the task or not:

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

Upvotes: 0

Related Questions