Artem Sapegin

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