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.

• Windows users: download the package
• Mac users: run brew install node

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 Gruntfile.coffee

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

module.exports = (grunt) ->
		grunt.initConfig
			coffee:
				compileJoined:
					options:
						join: true
					files:
						'js/application.js':
							[
								'js/*.coffee'
	#             'otherdirectory/*.coffee'
							]
			watch:
				files: 'js/*.coffee'
				tasks:
					[
						'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

grunt
	

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.

Done!

Debrief

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.