Titanium CLI + Alloy + Coffeescript

I love coffeescript, and these days I've been working on a mobile app, using Titanium & Alloy, and thought to myself: "can I do it with coffeescript?". And the answer was a big YES! I'll show you how:

First, you need to prepare our environment before you get the hands dirty:

Let's install nodejs:

MAC USERS

brew install node

LINUX USERS

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update && sudo apt-get install nodejs

BOTH SYSTEMS

sudo npm install -g coffee-script glob

Now, Titanium CLI and Alloy:

sudo npm install -g install titanium
titanium login
titanium sdk install
titanium setup
sudo npm install -g alloy

Make sure to add this line to your .bashrc (or .zshrc, .bash_profile):

export NODE_PATH=[path_to_node]/node_modules

where [pathtonode] is the path of your nodejs installation.

Now, let's configure the environment to recognize the .coffee files.

Download this file https://raw.githubusercontent.com/simonrand/coffee-alloy/master/coffeealloy.jmk and save it in your app folder. Then, create the file alloy.jmk in the same app folder and add the following content into it:

var path = require('path');

task("pre:compile", function(event,logger) {
    var coffeealloy = require(path.join(event.dir.home, 'coffeealloy.jmk'));
    coffeealloy.pre_compile(event, logger)
});

task("post:compile",function(event,logger){
    logger.info('compile finished!');
});

more details here: https://github.com/simonrand/coffee-alloy/blob/master/coffeealloy.jmk

And that's it! Now your titanium app speaks .coffee!

titanium build

Every time you build the application, the .coffee files will be parsed into .js files and added in the same folder. This is kinda messy, right?!. So, if you use Sublime Text 2, you can hide these .js files from your project. To do that, open your project with Sublime Text 2, then go to the Project menu and save it as your-project-name.sublime-project, right in your project's root path. Open this file and overwrite it with the following:

{
    "folders": [{
      "file_exclude_patterns": [ 
        "app/controllers/*.js", 
        "app/models/*.js", 
        "app/alloy.js", 
        "*.sublime-workspace", 
        "build.log", 
        ".project"
      ], // hide js files from app folder
      "folder_exclude_patterns": ["build"],
      "path": "[full_path_to_your_project]"
    }]
 }

CONCLUSION

I'm always looking for the perfect workflow and this is just the tip of the iceberg. If you guys have more information to complement this little tip, please, feel free to comment.