I came across grunt a few months ago and was amazed at how little time I spent looking at my build process before it. JavaScript was already in control of my frontend, backend, mobile, system scripts, and now it’s the entire build process. It’s amazing.
I’ve got tasks set up that look as gorgeous as this
[cc lang=’js’]
registerTask(‘dev’, ‘lint server sass open:dev watch’);
registerTask(‘build’, ‘lint sass requirejs preprocess strip min’);
[/cc]
Here are 6 grunt tasks that I’ve published this month that, when combined with everything already out there, have accelerated my development a huge amount.
grunt-strip
grunt-strip allows you to strip out console.logs from your JavaScript source files. It also supports configuring other nodes you might want to strip out (like other debug libraries).
Example config
[cc lang=”js”]
grunt.initConfig({
strip : {
main : {
src : ‘htdocs/js/main.js’,
dest : ‘build/js/main.js’
nodes : [‘rcl’, ‘console’]
}
}
});
[/cc]
grunt-preprocess
grunt-preprocess allows you to exclude or include parts of JavaScript and HTML files via directives that optionally depend on environment configuration.
Example config
[cc lang=”js”]
grunt.initConfig({
preprocess : {
index : {
src : ‘htdocs/main.html’,
dest : ‘build/main.html’
}
}
});
[/cc]
Example Syntax
[cc lang=”html”]
I’m in production!
[/cc]
Example JavaScript Syntax
[cc lang=”js”]
// exclude
expensiveDebugCode();
// endexclude
[/cc]
grunt-open
grunt-open simply allows you to open urls or files via task configuration.
Example config
[cc lang=”js”]
grunt.initConfig({
open : {
dev : {
url : ‘http://127.0.0.1:8000/htdocs’
}
}
});
[/cc]
Allows for task chains like
[cc lang=”js”]
grunt.registerTask(‘dev’, ‘lint server open:dev watch’);
[/cc]
RCL
RCL (Remote Client Logging) is a tool written with grunt that allows you to log from your JavaScript application remotely to a terminal or web client. Visit rcljs.com for full documentation.
grunt-jasmine-runner
grunt-jasmine-runner is an tool to automate the generation and running of a jasmine-based specrunner through phantomjs.
Example config
[cc lang=”js”]
grunt.initConfig({
jasmine : {
src : ‘src/**/*.js’,
specs : ‘spec/**/*.js’
}
});
[/cc]
grunt-requiredir
grunt-require-dir allows you to automatically generate requirejs-compatible AMD modules out of a directory tree. This is useful for bucketing alike resources without resorting to an full precompilation step that might remove some of the benefit of AMD.
Example config
[cc lang=”js”]
grunt.initConfig({
‘require-dir’ : {
all : {
plugin : ‘tpl’,
src : ‘test/fixtures/texttree/**/*.tmpl’,
baseDir : ‘test/fixtures/texttree/’,
prefixDir : ‘customDir/’,
dest : ‘test/fixtures/texttree.js’
}
}
});
[/cc]
Generates output like
[cc lang=”js”]
define(function(require){
return {
‘A’ : {
‘one’ : require(“tpl!customDir/A/one.tmpl”),
‘two’ : require(“tpl!customDir/A/two.tmpl”)
},
‘bar’ : require(“tpl!customDir/bar.tmpl”),
‘foo’ : require(“tpl!customDir/foo.tmpl”)
};
});
[/cc]
All told, grunt has opened up massive possibilities for me with JavaScript development. There is nothing particularly revolutionary about it, it’s just a bunch of incredibly useful tools located in one glorious place. Having such an important step be written in JavaScript makes it trivial to recognize a need for a task, switch to writing and finishing that task, and get back to coding your app with no expensive context switch.