Detect release / debug in gulp using Visual Studio 2015

Question

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

Answer 1

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 - https://docs.microsoft.com/en-us/aspnet/core/client-side/using-grunt

gulp - https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp

2. Create Debug and Release grunt/gulp tasks.
3. 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)

4. 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)

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

Answer 2

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>

Answer 3

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

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

Answer 4

When you're using Visual Studio and your project template is a Blank App (Apache Cordova) and you cannot see any Build Events when you right-click on ProjectName in Solution Explorer and go to Properties like below:

You can then manage your Solution Configuration using Cordova hooks. These are the special scripts injected in your solution to customize cordova commands and are executed with your solution activities/events. For more information, see this.

Steps to follow:

1. In the root directory of your project, create a new folder (say, 'hooks') containing the hook javascript file (say 'solutionConfigHook.js') as follows:

   "use strict";
   
   // function to run the '_default' task in 'gulpfile.js'
   // based on solution configuration (DEBUG or RELEASE) prior to building the solution
   module.exports = function (context) {
       var config = getConfig(context.cmdLine);
       if (!config) {
           console.log('Unable to determine build environment!');
           return;
       }
       else {
           var exec = require('child_process').exec, child;
           console.log('Runnung Gulp tasks now...');
   
           // 'solutionConfig' is the command line argument for config value passed to the gulpfile
           // '_default' is the task name in *gulpfile.js* that will have access to 'solutionConfig'
           var gulpCommand = 'gulp _default --solutionConfig ' + config.toString(); 
           console.log(gulpCommand);
   
           child = exec(gulpCommand, function (error, stdout, stderr) {
               console.log('stdout: ' + stdout);
               console.log('stderr: ' + stderr);
               if (error !== null) {
                   console.log('exec error: ' + error);
               }
           });
       }
   }    
   
   // function to get the solution configuration using CLI
   function getConfig(cmdLine) {
       var matches = /--configuration (\w+)/.exec(cmdLine);
       if (matches && matches.length > 1) {
           return matches[1];
       }
       return null;
   }
   

2. Add this hook in your config.xml file as follows for each platform against the desired hook type.

   (For your reference, the code snipped here is for windows platform alone and is called for 'before_build' hook type.)

   <platform name="android">
       ... // other resources or attributes
       <hook src="hooks/solutionConfigHook.js" type="before_build" />
   </platform>
   

3. In your gulpfile.js, remove the binding of the task(s) by either deleting the reference on top or by going to the Task Runner Explorer and then right-clicking each task and unchecking all bindings.

4. Add a task in your gulpfile.js that will be called by the hook itself on the activity defined as hook type in config.xml.

   gulp.task('_default', function (solutionConfig) {
       if (solutionConfig == "Release") {
           // perform desired task here
       }
       else if (solutionConfig == "Debug" {
           // perform desired task here
       }
   });
   

Answer 5

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>

Answer 6

I know this has been around for awhile but I recently ran into the same issue and was unhappy with the other solutions and workarounds that I found in answers here on SO. I found a very nice solution that we went with in the comments on the aspnet github page: https://github.com/aspnet/Home/issues/1231#issuecomment-182017985

I hope that it helps someone get to a solution they're happier with faster than I did.

Simply, add the following line to your pre-build event in project config

echo {"config" : "$(ConfigurationName)"} > ../buildConfig.json

With that little beauty sitting around you can read it in your tasks and react accordingly. I use it to prevent minifying files when I'm in debug mode like so:

gulp.task("min:js:bundlesFolder", function ()
    {
        var json = fs.readFileSync("./buildConfig.json", "utf8");
        var host = JSON.parse(json.replace(/^\uFEFF/, ''));
        host.isDebug = host.config == "Debug";
        console.log(host.isDebug);
        if (host.isDebug === true)
        {
            return;
        }
        return gulp.src([paths.jsbundleFolder + "/**/*.js", "!" + paths.jsbundleFolder + "/**/*.min.js"])
        .pipe(uglify())
        .pipe(gulp.dest(paths.jsbundleFolder));
    });