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:

*.html
Gruntfile.coffee
package.json
/lib
/coffee
*.coffee
/css
*.css
/js
*.js
/sass
*.sass
*.scss

view raw
directory.sh
hosted with ❤ by GitHub

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.

module.exports = (grunt) ->
# configuration
grunt.initConfig
# grunt sass
sass:
compile:
options:
style: 'expanded'
files: [
expand: true
cwd: 'lib/sass'
src: ['**/*.scss']
dest: 'lib/css'
ext: '.css'
]
# grunt coffee
coffee:
compile:
expand: true
cwd: 'lib/coffee'
src: ['**/*.coffee']
dest: 'lib/js'
ext: '.js'
options:
bare: true
preserve_dirs: true
# grunt watch (or simply grunt)
watch:
html:
files: ['**/*.html']
sass:
files: '<%= sass.compile.files[0].src %>'
tasks: ['sass']
coffee:
files: '<%= coffee.compile.src %>'
tasks: ['coffee']
options:
livereload: true
# load plugins
grunt.loadNpmTasks 'grunt-contrib-sass'
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
# tasks
grunt.registerTask 'default', ['sass', 'coffee', 'watch']

view raw
Gruntfile.coffee
hosted with ❤ by GitHub

{
"name": "grunt-sass-coffeescript",
"version": "0.1.0",
"repository": "",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-sass": "~0.7.2",
"grunt-contrib-coffee": "~0.10.1",
"grunt-contrib-watch": "~0.5.3",
"coffee-script": "~1.7.1"
}
}

view raw
package.json
hosted with ❤ by GitHub

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

# install sass
sudo gem install sass
# install grunt cli globally
sudo npm install -g grunt-cli
# note – switch to project directory where Gruntfile.coffee and package.json are sitting
# install dependencies
npm install
# run it (default is to watch both sass and coffeescript files)
grunt
# other tasks (compile once)
grunt sass
grunt coffee
# you can also explicitly call the watch task
grunt watch
# all commands are detailed by running the following
grunt –help

view raw
install.sh
hosted with ❤ by GitHub

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.

3 thoughts on “Simple Grunt Configuration for Sass & CoffeeScript”

  1. I have a problem with this:
    Running “sass:compile” (sass) task

    Running “coffee:compile” (coffee) task

    Running “watch” task
    Waiting…

    waiting waiting a long time but nothing happends
    what ‘s the problem?
    thanks

  2. If you run the watch task, it’s behavior is to wait and watch your files for changes.

    Simply make changes to either your sass or coffee files and it will automatically compile them.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s