Getting Started with Grunt.js

For quite some time, I’ve been hearing a lot of great things about Grunt.js: What it does for automating tasks in the development process; how it is so configurable; the fact that it is open source and driven by such a great community of developers; and how much easier it is to configure compared to other build scripts, such as Ant. I even sat through a great session by Ben Alman (the creator) at the 2012 jQuery Conference in San Francisco.

When I initially took a look at the project and what it would take to get up and running, I was a little intimidated and did not really know where to begin. So, as I usually do in those situations, I put it off. Finally, after about a year of hearing so many positive opinions about Grunt, I decided to just sit down for an afternoon and dig into it. I am so glad I did because I absolutely LOVE it!

The setup process really isn’t as complicated as I made it out to be in my mind – it’s really just a JSON file, a JavaScript setup file and whatever packages you wish to install. Here is a link to my notes from that afternoon.

0 thoughts on “Getting Started with Grunt.js”

  1. Great Notes Dan, I also just setup Grunt for the first time! I have to admit I fell into the intimidation trap as well but once I sat down to learn the tool it came fairly easily.

    One thing I’m still trying to figure out is how to configure my directory structure. Currently I have `/app` and `/build`. My local server is pointing to the `/build` directory. The issue is that I have to have my `/app/index.html` have the final build url references; e.g. `/path/to/file/script.min.js`. This also means I have to run Grunt every time I want to preview my changes locally.

    I want to have my Gruntfile change the html in my `index.html` so I can point my local to the `/app` directory and see the changes with out building every time.

    1. I am not sure if this is entirely what you’re looking for, but have you checked out the Grunt Watch plugin (https://github.com/gruntjs/grunt-contrib-watch)? The cool thing about this is that you can register it to your tasks list and just run ‘grunt’. It will call the watch task and build out your project whenever you update a file. The Gruntfile.js that I listed above in the examples uses this configuration.

Leave a Reply

Your email address will not be published. Required fields are marked *