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