Automate your development tasks using Grunt

Grunt is an extremely useful Node.js package to automate lots of development and continuous integration tasks. The Grunt eco-system has lots of packages available on npm. This enables us to quickly setup our development/continuous integration environment.

Grunt tasks mostly have two required properties. An files array, which is used to configure on what files the tasks is executed, and an options property which configures some task specific settings. The files array supports the globbing and minimatch pattern to match files based on the provided expression.

So what tasks could you use for your projects, or for which project can you use Grunt? How do I configure Grunt tasks? How do I execute them? All these questions I try to answer for you in this article.

If you are working on Node.js related projects, Grunt perfectly suites the job to do some tasks on your javascript. For example listing the javascript using jshint, execute unittests, do some static code analysis etc.

Also for other web development kind of projects Grunt perfectly fits the job. Example minify JavaScript, compile less files to CSS, minify images and/or replace small image urls in your CSS by base64 encoded images.

Still we didn’t reached the top of the iceberg. If you are working on .NET related projects grunt can also be used. There are tasks in the npm registry to compile your code using MSBuild, execute nunit and mspec tests and calculate code coverage using open cover etc. Grunt simplifies configuring the tasks and executing them.

So what if there is no Grunt tasks for the thing you would like to do. There is also a package which can execute commandline/shell jobs. So if you just want to execute some commandline/shell jobs, just use this package to execute these commandline tools more easily.

With a little bit of javascript knowledge you can easily write your own Grunt task. That’s what I did when I wrote the grunt-dotnet-mspec and the grunt-dotnet-codecoverage tasks. Both are available on Github (not yet implemented the full feature set) and I accept pull requests enhancing the grunt tasks. In this blogpost I won’t zoom in on writing your own Grunt tasks.

So enough chitchat for now. Lets provide you a small example gruntfile with an example configuration for tasks.

In this blogpost I want go into detailed explanation of the specific Grunt tasks since they  are pretty well explained on npm and Github you could find detailed information for these task configurations over there.

So how do we execute grunt tasks?

A Grunt task can be executed using grunt-cli which you can install globally using npm.

Then you can execute all grunt tasks on your shell (NodeJS commandline on Windows) using following command.

This executes the specified task based on the options and files provided in your gruntfile. A task can also have multiple targets so you can execute the task with different options or on different files. The specific target can be specified by appending it to the taskname using a colon.

So as an example on the above provided gruntfile we could execute following tasks or a task its specific target.

grunt jshint

This executes all the jshint tasks configured.

That sounds cool right? So now we can execute preconfigured tasks manually by keying in some simple commands on the commandline. Can we take this one step further? We can also define new tasks in our gruntfile to execute multiple tasks at once. For example a ci task which executes all the tasks required for our continuous integration. This gives us the ability to execute multiple tasks at once by calling only one task.

Example:

Can be executed as follow…

… for example on your Jenkins  server automatically every time your Jenkins server gets new code pushed. Or locally every time you want to run all of these tasks. Ofcourse this is not ideal on you local machine since a lot of files change regularly and you don’t want to execute the specific tasks everytime manually when you change something. That why we also want to automate this, so therefore we can use the grunt-contrib-watch task.

Grunt-contrib-watch enables us to watch our files for changes and execute the other grunt jobs automatically. Example: lint your javascript on changes to *.js files or compile your LESS files to CSS on changes to your *.less files.

Example:

So now you know the whats and hows about Grunt I would like to challenge you to share your personal experiences and preferred Grunt packages using a comment on this article. This way you help the other readers by adding value to this article. Thanks for reading and have fun playing around with Grunt.

You may also like...

Leave a Reply