1 of 9

Civet: A Django Plug-In for Faster CoffeeScript/Sass Development

Lukhnos Liu (lukhnos@lukhnos.org)

August 13, 2014

2 of 9

Background

I work at Counsyl
We use Python & Django
CoffeeScript + Sass, too
.scss/.coffee requires extra setup
Idea: let runserver take care of them?

3 of 9

Introducing Civet

https://github.com/counsyl/civet

4 of 9

Picture credit: Leendertz

http://en.wikipedia.org/wiki/Kopi_Luwak

5 of 9

Using Civet

pip install civet
In your settings.py:

INSTALLED_APPS = (

'django.contrib.staticfiles',

'civet',

...)

Specify where you want to save the assets:

CIVET_PRECOMPILED_ASSET_DIR = '/tmp/some_assets'

manage.py runserver

6 of 9

7 of 9

Under the Hood

Use django.contrib.staticfiles.finder
Pass directories to sass
Use watchdog for CoffeeScript

Works with Django file layout
Avoids problem with FSWatcher on OS X

Also massages source maps!

Easier to debug with .coffee code

Now, I’ll quickly go over what goes under the hood.

We use Django’s static finder to find all CoffeeScript and Sass assets across your project. One good thing is that it not only finds files inside your own project, but also files in your libraries. So if say you have a lot of internal libraries, you don’t have to package them with pre-compiled JavaScript or CSS assets.

Since the Sass compiler can watch multiple directories, we just pass to it the directories that have the assets.

For CoffeeScript we have to use the watchdog library to watch the files on our own, because of two things: One, the CoffeeScript compiler can only watch one top-level directory. This does not always work with Django’s file layout. Then, the FSWatcher library it uses can only watch a very limited number of files on OS X, if you don’t tweak your operating system settings.

Finally, Civet also knows to massage the source map. Since Civet allows you to separte the compiled JavaScript from the CoffeeScript source, this allows browsers to find the source correct when using source map debugging.

8 of 9

Comparisons

grunt, gulp, etc.
Civet is “Django-native”

Drop in Civet, start using CoffeeScript/Sass

Not a packaging tool

9 of 9

https://github.com/counsyl/civet