Detect release / debug in gulp using Visual Studio 2015

I've set up an ASP.NET 5 project in Visual Studio and created a gulpfile.js which I use to build my typescript and less files.

For release builds, I want to uglify and concat my javascripts, and for debug I want to include my typescript- and maps in my output folder.

Is there a way to 'tell' gulp the current configuration? I've seen some mention of setting the NODE_ENV environment variable, but thus far the solutions I've seen arent optimal; they require using the command line before starting the IDE, etc.

The closest solution I've seen is here:

This does, however, mean that I can no longer utilize the Task Runner Explorer which is built-in in the IDE


ANSWERS:


In Visual Studio 2015, with the gulp integration, I like @edo limburg and @RamenChef's answer the best.

I have a single page angular app in the same solution as my web api. When building the SPA, I just wanted to replace the URLs to the API and OAuth2 (OIDC) authority servers in an html and a couple of JavaScript files.

I created a gulpfile.js with both a Debug and Release task. Note the case-sensitive spelling:

gulp.task('Debug', function () { 
 gulp.src("./callback.html")
    .pipe(replace(uatAuthority,
                    debugAuthority))
    .pipe(gulp.dest('./'));
...
}
gulp.task('Release', function () {
 gulp.src("./callback.html")
    .pipe(replace(debugAuthority,
                    uatAuthority))
    .pipe(gulp.dest('./'));
)
}

FYI, I included gulp-string-replace to handle the replace tasks:

var replace = require('gulp-string-replace');

After I tested the tasks in the Task Runner Explorer, I unloaded the project file and edited it, adding the following code right before the end project tag:

<Target Name="BeforeBuild">
    <Exec Command="gulp $(Configuration)" />
  </Target>

In visual studio,

  • create a new console project
  • Install the nugget package 'MSBuild.NodeTools' in your project
  • Unload your .csproj file and edit it by adding the line in the after build target

       <Target Name="AfterBuild">
           <MSBuild.Gulp   GulpFile="path to your gulpfile"/>   
       </Target>
    

Here there is all property you can use :

  • GulpFile: Path to gulpfile. Defaults to $(MSBuildProjectDirectory)\gulpfile.[js|coffee].
  • GulpWorkingDirectory: Directory in which context the gulp task gets executed. Defaults to $(MSBuildProjectDirectory).
  • GulpBuildTask: Gulp task that gets executed on build. Defaults to build-$(Configuration).
  • GulpCleanTask: Gulp task that gets executed on clean. Defaults to unset.

As you can see the task executed takes the name of the configuration in visual studio, so if you build your project in "debug", the task "build-debug" will be executed

You can also doing like this, if you want a custom task :

<Target Name="AfterBuild">
<MSBuild.Gulp  Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU'"  GulpFile="path to your gulpfile"  GulpBuildTask="CustomDebug"/>
<MSBuild.Gulp  Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU'"  GulpFile="path to your gulpfile"  GulpBuildTask="CustomRelease"/>
</Target>

Disclaimer: I am entirely new to npm, grunt or gulp. However, I think that I found a simple solution using pre-build events.

Add the following line to your pre-build event command line in the project that contains the grunt (or gulp) files:

npm update && grunt $(ConfigurationName)

Now as long as you have grunt tasks with the same name as your build configuration, you should be all set.

grunt.registerTask('Debug', ['sass', 'concat']);
grunt.registerTask('Release', ['sass', 'concat', 'cssmin', 'removelogging', 'uglify']);

You'll need the usual pre-requisites on the machine that is running the build. Remember to restart VS after installing all of this stuff. Visual Studio needs to be run as Administrator in order to execute all all grunt tasks

  • Visual Studio Extenstions - Search for and install through Tools -> Extensions and Updates:
    • Node JS Tools
    • Web Essentials
  • NPM -
  • Ruby - Installer found here
    • IMPORTANT: In the installer check off "Add Ruby Executables To Your PATH"
  • Grunt and Sass - Both of these are installed through command prompt (Run as admin)
    • gem install sass
    • npm install -g grunt-cli

I'm using the Exec Build task to run a gulp task:

<Target Name="BeforeBuild">
   <Exec Command="gulp beforeBuild --c $(Configuration) --p $(Platform)" />
</Target>

The easiest way I've found:

  1. Get your grunt/gulp tasks running using the Task Runner Explorer first by following this guide. Do not set any bindings though.

grunt -

gulp -

  1. Create Debug and Release grunt/gulp tasks.
  2. Once running with the Task Runner Explorer, copy the command that Visual Studio uses to run your task from the output window of Task Runner Explorer. (Ignore the bindings, do not set these)

Task Runner Screenshot

  1. Change the paths so that they are relative to the bin folder, and to work with whichever mode is set in Visual Studio. From the image above, you would change the command to:

cmd.exe /c gulp -b ".\.." --color --gulpfile ".\..\Gulpfile.js" $(ConfigurationName)

  1. Paste this command as a pre-build task in your project.


 MORE:


 ? How to add a default Default.aspx to a ASP.NET Web Application Project?
 ? Using a wwwroot folder (ASP.NET 5 style) in ASP.NET 4.5 project
 ? Ajax call not working with web method
 ? Ajax call not working with web method
 ? Ajax call not working with web method
 ? ASP .NET: Cannot call Page WebMethod using jQuery
 ? Calling a function / database update using Ajax via Jquery
 ? Calling a WebMethod using jQueryAjax "GET"
 ? AJAX to web method not returning JSON
 ? JQuery ajax call web method cannot set datatype: json