What's the best way to use CoffeeScript with D

Question

While starting to use Sass / Compass with Django couldn't be much easier regardless of platform, it has taken a bit of searching around to find the best way to use CoffeeScript with Django on a Windows development box.

Answer 1

This looks promising to me: http://pypi.python.org/pypi/django-coffeescript/

Answer 2

Node support on Windows has greatly improved since I posted my original answer (which I will leave for historical purposes), so now it's much easier to get this working.

1. Download and install Node using the Windows installer. You get node and npm commands added to your Windows PATH automatically (available in cmd.exe).

2. Install CoffeeScript: npm install -g coffee-script. Then just to test, using cmd.exe...

   coffee --version
   CoffeeScript version 1.4.0 #sweet!
   

3. Install django-compressor: pip install django-compressor.

4. Add to your settings.py so django-compressor will precompile your CoffeeScript.

   COMPRESS_PRECOMPILERS = (
       ('text/coffeescript', 'coffee --compile --stdio'),
   )
   

5. Profit! Now use *.coffee files or inline CoffeeScript in Django templates and have it automatically compiled to javascript and combined with your other scripts into a single compressed file.

   Example (taken from django-compressor docs):

   {% load compress %}
   
   {% compress js %}
   <script type="text/coffeescript" charset="utf-8" src="/static/js/awesome.coffee" />
   <script type="text/coffeescript" charset="utf-8">
     # Functions:
     square = (x) -> x * x
   </script>
   {% endcompress %}
   

Original answer (obsolete):

The goal is to be able to write CoffeeScript right inside Django templates and have it get automatically converted to Javascript (along with .coffee files). django-compressor has a precompiler that does this, prior to the file compression it's known best for.

Of course the issue is you want to use Windows (what's wrong with you?), and the precompiler assumes you have a typical Linux installation of node.js and coffee-script, able to invoke 'coffee' from the command line with all its standard options. To get the same functionality Windows (without resorting to cygwin), you just have to make a little .bat file:

1. Grab the latest Windows binary of node

2. Add the path containing node.exe to PATH in Windows system environment variables

3. Pick one of:

   1. Given that npm is not available for Windows, you can use ryppi, a minimal Python node package manager, to install the coffee-script package. Put ryppi.py in your Python scripts folder.

      cd /d C:\Users\<USERNAME>\  #'node_modules' folder can live here or wherever
      ryppi.py install coffee-script
      

   2. Just download coffee-script from the main site

4. Add the path\to\coffeescript\bin (containing 'cake' and 'coffee') to your PATH in Windows system environment variables

5. Make a batch file so you can use 'coffee' from the command line (credit for this) by creating a coffee.bat file in path\to\coffeescript\bin folder above, with this as its contents:

   @pushd .
   @cd /d %~dp0
   @node coffee %*
   @popd
   

   Without this you have to do 'node \path\to\bin\coffee' instead of just 'coffee'.

6. Try reopening cmd.exe and type...

   coffee --version
   CoffeeScript version 1.1.2  #sweet!
   

   Now you're using the real coffee-script program on node.

7. Setup the django-compressor precompiler to use coffee.bat:

   COMPRESS_PRECOMPILERS = (
       ('text/coffeescript', 'coffee.bat --compile --stdio'),
   )
   

   I put that in my local_settings.py file. Just leave off the .bat as usual in the settings file used by your Linux production server or development box. Windows wasn't happy without the .bat.

8. Profit!

   Now you can use inline CoffeeScript in your Django templates, and have it automatically compiled to javascript and combined with all your other scripts into a single compressed .js file. I'll leave details of using django-compressor to it's documentation.

Answer 3

Django Pipeline (Django >= 1.5) supports CoffeeScript compilation, as well as loads of other stuff (e.g. LESS, SASS, JS/CSS minification, etc). Make sure you have CoffeeScript installed, then pip install django-pipeline, add 'pipeline' to your INSTALLED_APPS and then create the following config entry:

PIPELINE_COMPILERS = (
  'pipeline.compilers.coffee.CoffeeScriptCompiler',
)

Then you can set up files to compile as per the linked docs - basically just source file(s), destination file and a name. You can refer to the compressed files by this name in templates likes this:

{% compressed_js 'my_compressed_js' %}

Answer 4

You can use one of these CoffeeScript compilers.

Some of them support file system watching, like the official node package. So you can start a console and do

coffee -c src/ -o /bin --watch 

and all the coffeescript files in src will be automatically recompiled when they change. You don't need any special integration with django, although it might be nice.

Answer 5

I find the delay that compiling via compressor adds to be too much. So I compile on the client side instead, and check in the js files. Instant, and very convenient if you start watching files when the runserver command is run:

https://gist.github.com/EmilStenstrom/4761479