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