Node.js Install + CoffeeScript + LESS (+TextMate Bundles)

README.md

Install Homebrew

http://mxcl.github.com/homebrew/

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"
brew help
cd ~
mate .bashrc

# ~/.bashrc
export PATH="/usr/local/bin:$PATH"

brew update
brew install node
node --version

https://github.com/isaacs/npm/issues/823#issuecomment-1083996

# ~/.bashrc
export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/share/npm/bin:$PATH"
export NODE_PATH="/usr/local/lib/node_modules"

http://shapeshed.com/journal/setting-up-nodejs-and-npm-on-mac-osx/

Install NPM

http://npmjs.org/

curl http://npmjs.org/install.sh | sh
rehash
npm --version

Install CoffeScript

http://jashkenas.github.com/coffee-script/

npm install -g coffee-script
coffee --version
coffee
1+1
ctrl + c to exit

Coffee Script TextMate Bundle

https://github.com/jashkenas/coffee-script-tmbundle

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/jashkenas/coffee-script-tmbundle CoffeeScript.tmbundle

Terminals $PATH is not the same as TextMates PATH... http://wiki.macromates.com/Troubleshooting/TextMateAndThePath

TextMate > Preferences > Advanced > Shell Variable > PATH ... add to the beginning...

/user/local/bin:

e.g.

/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

Install Less

http://lesscss.org/

npm install -g less

To test it out in terminal first enter interactive "node"

node

Then copy & paste in this javascript

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

Which should output the following CSS to terminal

.class {
  width: 2;
}

Grab LESS TextMate "Language" Bundle

https://github.com/appden/less.tmbundle

Download the .tar.gz, unzip, navigate to Syntaxes/LESS.tmLanguage and double click it. Textmate will open and by default added these under a "USER NAME's Bundle" ... I changed this to "LESS".

Then Bundles > Bundle Editor > Reload Bundles to reload your bundles. You shouldn't see "LESS" listed as you've only installed a Language bundle for syntax highlighting.

Note: There is a Commands/Save to CSS.tmCommand included, but I'm not using it. Why? It uses the OLD Ruby lessc to compile on save. I also couldn't get this Node.js version working https://github.com/creationix/LESS.tmbundle ... and there is a better solution below for watch/save ...

Download LESS.app for Mac OSX

http://incident57.com/less/ <-- this little app ROCKS.

Done

Pat yourself on the back you're done!

If anyone has any tips to add to this process please comment. ^_^