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
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
.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
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-clilike the Getting Started guide specifies
- You didn’t mention
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.