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.
- 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
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.
|module.exports = (grunt) ->|
|# grunt sass|
|# grunt coffee|
|# grunt watch (or simply grunt)|
|files: '<%= sass.compile.files.src %>'|
|files: '<%= coffee.compile.src %>'|
|# load plugins|
|grunt.registerTask 'default', ['sass', 'coffee', 'watch']|
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|
|# run it (default is to watch both sass and coffeescript files)|
|# other tasks (compile once)|
|# you can also explicitly call the watch task|
|# all commands are detailed by running the following|