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

Here is another solution that allows you to pass the configuration as a flag to your gulp task, instead of running the configuration as the task itself. This would allow you to use gulp-if to trigger different procedures from within the task.

Note: This answer assumes that gulp isn't installed globally.

1. Install gulp as a dev dependency

   npm install gulp --save-dev
   

2. Register gulp as an npm script

   {
       "name": "vs-build-test",
       ...
       "scripts": {
           "gulp": "gulp"
       }
   }
   

3. Install yargs to handle custom flags

   npm install yargs --save-dev
   

4. Require yargs in gulpfiles.js with a default for the configuration flag

   var argv = require('yargs').default('configuration', 'Debug').argv
   

5. Create a build task in gulpfile.js

   gulp.task('build', function () {
       console.log(`Build Configuration: ${argv.configuration}`);
   });
   

6. Add a pre-build event to run gulp [Project Properties -> Build Events -> Pre-build Event]

   cmd.exe /c npm run gulp build -- --configuration $(ConfigurationName)
   

---

The reason this can be useful is so that you can use the same tasks but conditionally run only portions of the process. Take for example a task that builds javascript:

gulp.task('build:js', function () {
    let isProduction = ${argv.configuration} === 'Release';

    ...

    return gulp.src(source)
            .pipe(gulpif(!isProduction, sourcemaps.init()))
            .pipe(concat(outputFile, { newLine: ';' }))
            .pipe(gulpif(isProduction, closure(closureFlags)))
            .pipe(gulpif(!isProduction, sourcemaps.write()))
            .pipe(gulp.dest(basePath));
});

Answer 2

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 - https://nodejs.org/en/download/
• Ruby - Installer found here http://rubyinstaller.org/downloads/
  • 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