Simple Grunt Configuration for Sass & CoffeeScript

UPDATE: There was a small bug with watching Sass files which is now fixed. The fix removed the ability to use .sass and now only .scss will be processed. You can of course edit the code and switch to .sass but it doesn’t allow you to watch them both at once. The majority of folks use .scss so I doubt this will be an issue.

I also added support for LiveReload.


Today I needed a simple Gruntfile for compiling Sass and CoffeeScript files. My requirements were pretty basic:

  • use CoffeeScript for the Gruntfile
  • compile *.coffee into *.js
  • compile *.sass and *.scss into *.css
  • allow for sub-directories
  • maintain the directory structure
  • provide commands to simply compile once or watch for changes

Now there’s a ton of articles out there about doing this but many fall short with a combination of being out-dated, using JavaScript for the Gruntfile, hard-coding file paths, not preserving directory structure, etc. So here’s a very simple working configuration to get you up and running fast.

First, I’m assuming you’ve got Node installed along with Ruby and RubyGems.

Second, I’m also assuming you have a directory structure that looks like this:

You can easily change it around by editing the cwd, src, and dest properties of the Gruntfile. But I suggest running it as-is at first to ensure you’ve got things working in the first place.

Copy the following two files (Gruntfile.coffee and package.json) and drop them into the root of your project.

With those in place, you’re almost ready to go. Just ┬árun the following couple of commands and you should be up and running.

Make sure to check out the complete list of options for the Grunt Sass plugin and the Grunt CoffeeScript plugin as you can easily tweak the Gruntfile to suite your needs.

PyCharm Command Not Found When Using Virtualenv & MacPorts

I recently switched a project over to using virtualenv for my PyCharm Django server run/debug configuration and ran into a ‘command not found’ error when trying to use another MacPorts installed package (sass) from Django (via Django Compressor).

Here is my original server configuration in PyCharm:

A quick look at the PATH environment variable identified the trouble:

MacPorts Python (/opt/local/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7)

>>> print os.environ['PATH']
/opt/local/bin:/opt/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin

Virtualenv Python (/Users/chriskief/.virtualenvs/exampleproject/bin/python)

>>> print os.environ['PATH']
/usr/bin:/bin:/usr/sbin:/sbin:/Users/chriskief/.virtualenvs/exampleproject/bin

The MacPorts bin and sbin are missing from the PATH, and that’s where sass lives:

which sass
/opt/local/bin/sass

The solution is to add the MacPorts directories (/opt/local/bin:/opt/local/sbin:$PATH) to your environment variables’ PATH in the run/debug configuration:

As a side note, if you run the Django server using the virtualenv from your terminal, you won’t encounter this error because MacPorts includes these directories in your .profile PATH:

# MacPorts Installer addition on 2013-10-26_at_16:30:30: adding an appropriate PATH variable for use with MacPorts.
export PATH=/opt/local/bin:/opt/local/sbin:$PATH
# Finished adapting your PATH environment variable for use with MacPorts.