Running Grunt Typescript from MSBuild

Question

I have a typescript project set up that is being built with GruntJS using the typescript plugin. I also have a Visual Studio project that I'd like to be able to invoke the build process from.

My first attempt at doing this was adding an <Exec> task to the BeforeBuild target in visual studio, with the <Exec> task configured like this:

<Exec Command="grunt --no-color typescript" />

This runs the build fine, however, when errors are output from Grunt and they populate the Error List in VS, the filename is incorrectly listed as EXEC.

Looking at the Exec Documentation I see that CustomErrorRegularExpression is a parameter to the command, but I can't quite grasp how to use it to solve my problem.

I messed around with it a bit and managed to change the reported filename to my .jsproj file, which is also incorrect. Looking at this post I tried forming my own regex:

<Exec CustomErrorRegularExpression="\.ts\([0-9]+,[0-9]+\):(.*)" Command="grunt --no-color typescript" IgnoreExitCode="true" />

Does anyone have any experience using this command with this parameter to achieve this sort of thing? I think maybe part of the problem is that grunt is printing out errors in two lines?

Answer 1

You are correct about the Exec task only processing single line messages. In addition it also uses Regex.IsMatch to evaluate the error/warning condition, without making use of the pattern's capture groups.

I was not able to find a way to work around this via MSBuild, but the changes to correct the problem were easy to make directly in the grunt task.

I'm using the grunt-typescript task from: https://www.npmjs.org/package/grunt-typescript.

There were 3 trivial changes necessary to make this work.

1) Replace the output utility methods near the top of tasks/typescript.js:

/* Remove the >> markers and extra spacing from the output */
function writeError(str) {
  console.log(str.trim().red);
}

function writeInfo(str) {
  console.log(str.trim().cyan);
}

2) Replace Compiler.prototype.addDiagnostic to write the file and error data on the same line:

Compiler.prototype.addDiagnostic = function (diagnostic) {
  var diagnosticInfo = diagnostic.info();
  if (diagnosticInfo.category === 1)
    this.hasErrors = true;

  var message = "  ";
  if (diagnostic.fileName()) {
    message = diagnostic.fileName() + 
      "(" + (diagnostic.line() + 1) + "," + (diagnostic.character() + 1) + "): ";
  }

  this.ioHost.stderr.Write(message + diagnostic.message());
};

Once these changes are made, you no longer need the CustomErrorRegularExpression to be set on your Exec task, and your build output should display the error text including the correct source file with line and column information.