JavaScript and Stylus conditional compilation (debug mode) in Grunt

Often you want some code to be executed only in development environment but not in production. It’d be convenient to have a tool that will remove such code on deploy.

Debug mode enables when Grunt runs with --debug key. You can determine it in your Gruntfile:

const debug = Boolean(grunt.option('debug'));

We’ll use this variable very soon.

#JavaScript

in UglifyJS you can define global variables, kind of preprocessor: variable will be replaced with its value and all the code that became dead (if (false) { /* Like this */ } will be removed.

You can define such variables via command line or via Gruntfile:

grunt.initConfig({
  uglify: {
    options: {
      compress: {
        global_defs: {
          DEBUG: debug // That very variable
        }
      }
    },
    main: {
      files: {
        'build/scripts.js': 'build/scripts.js'
      }
    }
  }
});

Variable usage in JavaScript:

/*global DEBUG:true*/
// Debug mode enabled by default (you can do the opposite too)
if (typeof DEBUG === 'undefined') {
  DEBUG = true;
}
 
(function () {
  'use strict';
 
  // …
  if (DEBUG) {
    alert('This alert will be shown only in debug mode');
  }
  // …
})();

#Stylus

Stylus is even easier. Gruntfile:

grunt.initConfig({
  stylus: {
    options: {
      define: {
        DEBUG: debug
      }
    },
    compile: {
      files: {
        'build/styles.css': 'styles/index.styl'
      }
    }
  }
});

And example:

DEBUG ?= true;
 
div {
  outline: 1px solid #c0ffee if DEBUG;
}