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:

var debug = !!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:

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:

stylus: {
  options: {
    define: {
      DEBUG: debug
    }
  },
  compile: {
    files: {
      "build/styles.css": "styles/index.styl"
    }
  }
}

And example:

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