Compiling automatically SASS with Grunt

Once upon a time there was a castle and there were a beauty and a beast and that was an improbably but big love story…

Requirements

• node.js/npm (read here for installing it)
• Ruby
• Sass

From grunt-contrib-sass:

If you’re on OS X or Linux you probably already have Ruby installed; test with ruby -v in your terminal. When you’ve confirmed you have Ruby installed, run gem install sass to install Sass

While installing Sass gem, you could get permission errors, I simply solved using sudo gem install sass, but if you prefer a cleaner solution read here.

Installing Grunt and SASS compiler module

1. Create a file called package.json in your project folder (the theme folder, if you use WordPress) and paste this code:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "Description for your project",
  "license": "MIT",
  "repository": "",
  "private": true,
  "author": "Netgloo web agency",
  "devDependencies": {
    "grunt": "latest",
    "grunt-contrib-sass": "latest",
    "grunt-contrib-watch": "latest",
    "load-grunt-tasks": "latest"
}

This file contains the list of modules needed to install Grunt (the build tool) and other Grunt modules (such as the SASS compiler). You can extend the list by adding other modules.

Notice that the versions are set as latest, this means that Npm will downloads the latest version of each modules. This could be dangerous in production, so consider to replace with specific versions or ranges.

2. Open a terminal window, go to your project folder and launch the command: npm install (if you get errors about permissions don’t use sudo but fix the npm permissions). This command starts the download of the above modules from the npm repository. At the end, you will find a new folder in you project directory, called node_modules. Don’t remove that or you will die! And you don’t wanna die, right?

Configuring Grunt

Now create in your project folder a file called Gruntfile.js and paste in this code:

module.exports = function(grunt) {
  
  // Load automatically all tasks without using grunt.loadNpmTasks()
  // for each module
  require('load-grunt-tasks')(grunt);


  /* ---------------------------------------
   * Tasks configuration
   * --------------------------------------- */
  grunt.initConfig({

    /*
     * Paths
     */
    paths: {
      resources: 'path-to/resources', // source files (scss)
      assets: 'path-to/assets'       // compiled files (css)
    },

    /* 
     * SASS task
     */
    sass: {

      // For development
      dev: {
        files: {
          '<%= paths.assets %>/css/main.css' : '<%= paths.resources %>/sass/main.scss'
        },
        options: {
          style: 'expanded'
        }
      },

      // For production
      prod: {
        files: {
          '<%= paths.assets %>/css/main.css' : '<%= paths.resources %>/sass/main.scss'
        },
        options: {
          style: 'compressed', // This option minimizes the CSS
          sourcemap: 'none'
        }
      }

    },

    /* 
     * Watch task
     */
    watch: {
      sass: {
        files: [
          '<%= paths.resources %>/sass/*.scss' // Write here the files that Grunt must watches
        ],
        tasks: ['sass:dev']
      }
    }

  });


  /* ---------------------------------------
   * Registered tasks
   * --------------------------------------- */
  grunt.registerTask('default', ['sass:dev']);
  grunt.registerTask('prod', ['sass:prod']);

};

This file contains the configuration for Grunt and its modules, then remember to change the paths for resources and assets adapting them to your project structure (check the comments).

I suppose in your project you have a main.scss file that includes @import of other files that will be concatenated in the main.css to give you a single stylesheet.

Go with automatic compilation

Finally, launch grunt watch from your project folder et voilà! You will see that it remains in listening for changes to any SASS file, when it detects an edit it will automatically compiles to CSS (for development). Don’t close the terminal window.

Manual compilation and deploy

For forcing a compilation just launch grunt from the terminal and Grunt compiles for development. Instead, for production (that is minified CSS and no sourcemap) launch grunt prod.