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 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: http://www.colinsalmcorner.com/post/gulp--workaround-for-handling-vs-solution-configuration

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

Answer 1

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));     }); 

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>