Grunt is the latest tool I've fallen in love with. Grunt is a JavaScript task runner we can use to automate our front-end development projects.

For instance, instead of running sass --watch in a shell to compile our Sass stylesheets, plus launching a local server with python -m SimpleHTTPServer in another one, and manually open a browser to see our page, we can centralise all of this in a single task manager: Grunt.

Curious? Download this grunt demo project on Github. The folder structure is quite common: the app directory contains stylesheets, HTML files, scripts, etc.; whereas the test directory contains our specs for the app.

To try the demo, you need to install the Grunt client first (assuming you already have Node in your machine), then clone the repository and install its dependencies:

npm install -g grunt-cli
git clone git@github.com:belen-albeza/grunt-demo.git
cd grunt-demo
npm install

Now you can run Grunt! This will make a development build of the app, launch a server and open a browser with the app loaded:

grunt server

If you want to run the Jasmine specs in a browser window, just try:

grunt test:server

You can also run simple, "atomic" tasks, such as linting your JavaScript code with JSHint:

grunt jshint

Take a look a the README.md file in the repo to see what tasks are included. You can tweak the tasks' configuration in the almighty Gruntfile.js.

By the way, the source code of this demo project has been extracted from Power-Up Your Front-End Development With Grunt, my quick start guide to Grunt. You'll find it interesting if you want to understand the tasks configured in the Gruntfile.js.