gulp sass.logError not working in visual studio task runner

Question

Consider the following code:

var gulp = require('gulp');
var sass = require('gulp-sass');
var gdebug = require('gulp-debug');

module.exports = function (sourcedir, targetDir, directTarget)
{
    return function ()
    {
        var source = directTarget != null ? directTarget : sourcedir + '/**/*.scss';

        return gulp.src(source, { base: sourcedir })
            .pipe(sass({ includePaths: [`${sourcedir}/**/`] }).on('error', sass.logError))
            .pipe(gulp.dest(targetDir))
            .pipe(gdebug());
    }
}

When running this in the visual studio task runner, all errors within the sass compilation are completely hidden. If I replace sass.logError with a simple function(e){console.log(e)}, the error event gets logged as expected.

I'm quite sure this worked as it should before, I just recently noticed that I had some scss-files that silently failed to compile. What could have happened?

Answer 1

Alex,

We came across the exact same issue today and were looking for alternatives. Turns out the sass.logError function does not pass the error back into the gulp system but to the 'process.stderr.write(message + '\n');'

This is found in the index.js file under the path.

\\Project\nodule_modules\gulp-saas\index.js\

The function is defined on line 170 (apx) as.

//////////////////////////////
// Log errors nicely
//////////////////////////////
gulpSass.logError = function logError(error) {
  var message = new gutil.PluginError('sass', error.messageFormatted).toString();
  process.stderr.write(message + '\n');
  this.emit('end');
};

As a work around I have modified the file to print to the gutil.log method, which in turn passes to the Console in visual studio.

First you will need to enter a require entry at the top of the file (with the rest) as (this only makes pretty colors)

var chalk = require('chalk');

Then modified the logError as below.

//////////////////////////////
// Log errors nicely
//////////////////////////////
gulpSass.logError = function logError(error) {
  gutil.log('Error', chalk.red('Uncaught error while processing task ') + '\'' +  chalk.cyan('saas') + chalk.red('\'.'));
  gutil.log('Message', error.formatted);
  this.emit('end');
};

You will see that two lines are printed to the console, first line with a generic message (in red to catch your attention) followed by the message. The object passed in error is a standard Javascript Object with the following properties.

{
    "formatted":
    "message":,
    "column":,
    "line":,
    "file":,
    "status":,
    "messageFormatted":,
    "stack":,
    "showProperties":,
    "plugin":
}

Here is an example result.

Answer 2

It seems like this was due to a bug in Microsoft ASP.NET and Web Tools. There is now a new version released, Preview 2, and this problem seems to be solved.

Hence no need for workarounds.