Order of Events - MSBuild and Task Runner Bindings (Gulp)

Question

I am using a TFS build project to build a Visual Studio 2015 project that contains a gulpfile for compiling SASS among other things. I am trying to understand the sequence of events using MSBuild Tasks and Task Runner bindings. It appears that MSBuild knows enough to detect and run my default gulp task BeforeBuild:

/// <binding BeforeBuild='default' />
var gulp = require('gulp');
var sass = require('gulp-sass');
var importer = require('sass-importer-npm');

gulp.task('sass', function () {
  return gulp.src([
    './sass/**/*.scss',
    './node_modules/font-awesome/scss/**/*.scss'
  ])
    .pipe(sass({ importer: importer }).on('error', sass.logError))
    .pipe(gulp.dest('./Content/css'));
});

I am to using an MSBuild target to run after the BeforeBuild target so that I can include the generated files in the project for publishing:

<Target Name="CopyGulpFiles" AfterTargets="BeforeBuild">

Here is my MSBuild call in my build .proj file with the relevant info:

<ItemGroup>
    <ProjectsToBuild Include="$(MSBuildThisFileDirectory)..\MyProject.sln">
      <AdditionalProperties>
        VisualStudioVersion=$(VisualStudioVersion);
        OutputPath=$(OutputRoot);
        WebPublishMethod=FileSystem;
        publishUrl=$(StageFolder); 
        DeployOnBuild=false;
        DeployTarget=WebPublish;
        PublishProfile=$(MSBuildThisFileFullPath)
      </AdditionalProperties>
    </ProjectsToBuild>
  </ItemGroup>

<MSBuild Projects="@(ProjectsToBuild)" Properties="Configuration=Dev"/>

These two things seem to run in the right order everytime I run them. This raises some questions though:

• Would the 'BeforeBuild' binding for Task Runner get executed before the 'BeforeBuild' target in MSBuild?
• Are the order of bindings/targets deterministic here?
• Does using the AfterTargets property ensure that this is run after the whole 'BeforeBuild' stage (targets and bindings) are completed?
• How does MSBuild know how to use my Gulp file? I assume it has to be the same mechanism as visual studio uses.

Republic

Answer 1

I ran into the issue where everything worked locally when building with the Task Runner, but Gulp was never called by MSBuild.

I ended up with the following solution, which extends the Compile task with our custom target GulpBuild. In this snippet build is the name of my Gulp task.

<PropertyGroup>
    <CompileDependsOn>
        $(CompileDependsOn);
        GulpBuild;
    </CompileDependsOn>
</PropertyGroup>
<Target Name="GulpBuild">
    <Exec Command="npm install" />
    <Exec Command="gulp build" />
</Target>

Steve Cadwallader's post was very helpful in solving this issue.

• The BeforeBuild target should always run before BeforeBuild in MSBuild. The Task Runner is specific to Visual Studio, so this will only happen when building in Visual Studio.
• This will help with your questions about ordering.

Filament

Answer 2

My solution is very similar to that of @agressen, but updated from this answer and customized per Configuration:

<Target Name="GulpBuildUAT" BeforeTargets="BeforeBuild" Condition="'$(Configuration)'=='UAT'">
        <Exec Command="npm install gulp" />
        <Exec Command="gulp build-release" />
    </Target>

Knowing