No-Fuss Grunt Setup for Compiling Multiple CoffeeScript Files into One JS File


No doubt you found this post because you’re looking for how to get set up with using Grunt to improve your workflow. Or something. Not really sure why you need Grunt? Great! Want to cut down on fluff and just get a minimal setup? Awesome! Both of you: keep reading.

If you want to read manuals about all it can do, go away and read the Grunt docs. This post is for the I-don’t-care-just-make-it-work crowd.

We’re going to be watching CoffeeScript files from a directory, then automatically compiling them as we work into one JS file (which is impossible with the CoffeeScript compiler alone). If you’re not sure why you need Grunt, this is why: it performs tasks in the background while you work, and can push around/move files as you need to. So, it’s like CodeKit? Yes, it’s like CodeKit. Only, you have more options available to you, and it’s much faster and more powerful, especially if you’ve experienced CodeKit hiccups / crashes as I have (to clarify: CodeKit is great; I love it. It’s an amazing program. But it doesn’t have a 100% success rate for what I need it to do).

Step 1: Install Grunt

You need Node installed first.

Once that’s good, run from Terminal:

npm install -g grunt

Step 2: Change to your Project Root

cd into your project’s root folder. Grunt will install some files in there that it needs. For the rest of the tutorial, we’ll be working in your project’s root directory.

Step 3: Install Plugins

Then, install any plugins you may need. For this example, we need watch and coffee.

npm install grunt-contrib-watch
	npm install grunt-contrib-coffee

These files will install in node_modules/ in your project’s root folder. No, there’s not an easy way for it to not do this.

Step 4: Make

This is an example, which goes in your project root folder:

module.exports = (grunt) ->
						join: true
	#             'otherdirectory/*.coffee'
				files: 'js/*.coffee'
	#         'other-task'

		grunt.loadNpmTasks 'grunt-contrib-coffee'
		grunt.loadNpmTasks 'grunt-contrib-watch'

		grunt.registerTask 'default', ['coffee']

Note: many people use Gruntfile.js, but .coffee works all the same. Whatever your preference. Oh, and yes, the first letter is capitalized if you’re following convention, but it will still work if it’s not. N00b.

Step 5: Run

From your project root folder, after everything has been set up, simply run


to loop through all the tasks one time only, or

grunt watch

to have grunt run continuously as you work. Simply modify your watch task and add more commands to the array under tasks to taste.



To put things lightly, I told you wrong on a few things. What? That’s right. In order to truly provide a no-fuss setup, I gave you one of the many possible setup options you could take, and there are a number of alternate, more “tweakable” routes you could take to manage Grunt a bit better. It’s wrong in that I could have added more steps to give you a more flexible system, but I minimized the steps and gave fewer options to get you up and running faster. I thought I told you nay-sayers to just go read the docs!

Some likely objections I’ll hear to this approach:

  • This skips grunt-cli like the Getting Started guide specifies
  • You didn’t mention package.json

All to which I would say: you’re right. You’re absolutely, absolutely, right. But these are optional for non-Node sites, and were omitted simply because you can get away with skipping this. I also know you can manage Grunt versions better, but all these are bridges to cross when there are version conflicts, a higher-level problem to solve than simply compiling and getting on your way to making websites.

Drew Powers is a frontend developer at Envy.