How to hide the default gulp error?

[ronilaukkarinen]

Hello,

No matter what I do I always see the default console output. How to hide that?

Screenshot:

gulpfile.js:

// Export tasks
exports.js = require('./gulp/tasks/js.js').js;
exports.phpcs = require('./gulp/tasks/phpcs.js').phpcs;
exports.lintstyles = require('./gulp/tasks/lintstyles.js').lintstyles;
exports.devstyles = require('./gulp/tasks/devstyles.js').devstyles;
exports.prodstyles = require('./gulp/tasks/prodstyles.js').prodstyles;
exports.watch = require('./gulp/tasks/watch.js').watch;
exports.default = require('./gulp/tasks/watch.js').watch;

watch.js:

// Dependencies
const {
  watch,
  series
} = require('gulp');
const bs = require('browser-sync').create();
const config = require('../config.js');
const {
  handleError
} = require('../helpers/handle-errors.js');

// Task
function watchfiles() {
  bs.init(config.browsersync.src, config.browsersync.opts);
  watch(config.styles.watch, series('devstyles', 'prodstyles', 'lintstyles')).on('error', handleError());
  watch(config.php.watch, series('phpcs')).on('change', bs.reload);
  watch(config.js.watch).on('change', series('js'), bs.reload);
};

exports.watch = watchfiles;

handle-errors.js:

// Dependencies
const notify = require('gulp-notify');
const color  = require('ansi-colors');

// General error handling
const handleError = function (task) {
  return function (err) {
    // Remove default log
    console.log = function() {}

    if (typeof err !== 'undefined') {
      // [log] Uncomment to show the full error object
      //console.log(err);

      // ----------------------------------------------
      // Normalize error responses
      var report = ['\n'];
      var notifyMessage = '';

      if (err.plugin == 'gulp-eslint') {
        report.push(color.magenta('Plugin: ') + err.plugin     + '\n');
        report.push(color.magenta('File:   ') + err.fileName   + '\n');
        report.push(color.magenta('Line:   ') + err.lineNumber + '\n');
        report.push(color.magenta('Note:   ') + err.message    + '\n');
        notifyMessage = 'JS linter found errors.';
      }

      if (err.plugin === 'gulp-dart-sass') {
        report.push(color.magenta('Plugin: ') + err.plugin          + '\n');
        report.push(color.magenta('File:   ') + err.relativePath    + '\n');
        report.push(color.magenta('Line:   ') + err.line            + '\n');
        report.push(color.magenta('Column: ') + err.column          + '\n');
        report.push(color.magenta('Note:   ') + err.messageOriginal + '\n');
        notifyMessage = err.relativePath + '\n' + err.line + ':' + err.column;
      }

      if (err.plugin == 'gulp-stylelint') {
        notifyMessage = 'CSS linter found errors.';
      }

      if (err.plugin === 'gulp-uglify') {
        report.push(color.magenta('Plugin: ') + err.plugin         + '\n');
        report.push(color.magenta('Path:   ') + err.fileName       + '\n');
        report.push(color.magenta('File:   ') + err.cause.filename + '\n');
        report.push(color.magenta('Line:   ') + err.cause.line     + '\n');
        report.push(color.magenta('Column: ') + err.cause.col      + '\n');
        report.push(color.magenta('Note:   ') + err.cause.message  + '\n');
        notifyMessage = err.cause.filename + '\n' + err.cause.line + ':' + err.cause.col;
      }

      // ----------------------------------------------
      // Show error in console
      console.error(report.join(''));

      // ----------------------------------------------
      // Fire Mac/Windows notification for error
      notify({
        title:   'Gulp task failed — see console',
        message: notifyMessage,
        sound:   'Sosumi' // Sound for Mac. See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
      }).write(err);
  }
  };
};

module.exports = {
  handleError
};

Tips?

[rootwork]

Which part of the "default console output" do you not want to see? The main portion shown in your screenshot is an error from your CSS.

[ronilaukkarinen]

I want to hide everything from the default output. I know the main portion is error from my CSS I did intentionally to demonstrate the error.

The problem is no matter what type of custom errorhandler I write I get the default (on white color) displayed. So I always get errors twice, the original report and my custom report. In my final error handler the white errorlog is left behind the colored report of my own, see my blog post.

[begin-again]

I often run gulp as a child process and capture it's stdout & stderr rather than send to console.

[ronilaukkarinen]

Do you have an example of that?

[begin-again]

• pexec is just const pexec = require('util').promisify(require('child_process').exec);
• all of the double dash command line flags are used internally so please ignore
• the options to pexec you can ignore too as I'm just manipulating the node version the child process will use

/**
 * Executes build for a given mode
 *
 * @param {String} mode - deployment mode
 * @param {String} buildPath - to release folder
 * @param {String} builder - path to the builder
 * @param {String} repoPath - The path of the repository
 * @param {String} nodePath - The path to the node binary including the binary
 */
const build = (mode, buildPath, builder, repoPath, nodePath) => {
    // purposely excluding the added overhead of yarn
    const cmd = `${nodePath} ${join(builder, gulpBinary)} -f ${join(builder, 'gulpfile.js')} --single --${mode} --min --path ${buildPath} --caller ${repoPath}`;
    logger.debug(`lib:build mode = ${mode}, cmd = ${JSON.stringify(cmd)}`);
    logger.info(`-- ${mode} started`);
    // eslint-disable-next-line no-process-env
    return pexec(cmd, { encoding: 'utf8', env: { ...process.env, PATH: `${dirname(nodePath)};${process.env.PATH}` } })
        .then(out => {
            if(out.stderr) {
                return { mode, error: out.stderr };
            }
            toArray(out.stdout).map(line => {
                logger.debug(`${mode}: ${line}`);
            });
            logger.info(`-- ${mode} completed`);
            return { mode };
        });
};