SASS compilation with Grunt

Sass files compilation with Grunt

This is a demonstration of how to set up a basic automatic compilation of Sass files with "grunt-compass" and "grunt-contrib-watch". At the end of this tutorial, you should be able to run "grunt watch_sass" command to make grunt init compass to look for changes in your Sass files. Compass should detected any changes and compile your files.

You can download the demo in this repo.

You should have Ruby, Sass, NodeJS already installed on your windows machine before you continue.

Once you're sure the above software is installed correctly on your machine create a package.json file in your project's directory, e.g.:

 {  
  "name": "grunt-test",  
  "version": "0.0.1-1",  
  "private": false,  
  "devDependencies": {  
   "grunt": "~0.4.2",  
   "grunt-contrib-watch": "~0.4.4",  
   "grunt-compass": "0.3.9"  
  },  
  "engines": {  
   "node": "0.10.x"  
  }  
 }  

In your command line go to project's folder directory and type "npm install" command to get all of the dependencies to your project's folder.

Now create a "public/css" directory with "sass" and "stylesheets" folders. Place a few ".scss" files in the "sass" folder with some random styles.

Next, create a "Gruntfile.js". This is the place where we'll have all of our grunt's commands and settings defined. 

"grunt development" command

Let's begin with "grunt development" command. Please remember that you may change the names for your grunt commands - "development" and "watch_sass" are just examples. For this task our Gruntfile.js may look like this:

 'use strict';  
 module.exports = function(grunt) {  
  // Project configuration.  
  grunt.initConfig({  
   compass: {  
    prod: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'compressed', //other options are: nested, compact, expanded  
     linecomments: false,  
     forcecompile: true  
    }  
   }  
  });  
  // plugin tasks  
  grunt.loadNpmTasks('grunt-compass');  
  /* Default command "grunt" or "grunt development" - compiles files from "public/css/sass" to 'public/css/stylesheets' already compressed */  
  grunt.registerTask('default', 'compass:prod');  
  grunt.registerTask('development', 'compass:prod');  
 };  

We already should have "grunt" and "grunt development" commands set. Both should accomplish the same task due to the fact that they perform the same operation "compass:prod". They ought to create compiled CSS files in "public/css/stylesheets" directory.

"Grunt watch_sass" command

As mentioned before, "grunt watch_sass" will watch your sass files for changes. We have to load the grunt plugin "grunt-contrib-watch":

  grunt.loadNpmTasks('grunt-contrib-watch');

Then define some configuration in "grunt.initConfig()", e.g.:

 watch: {  
  compass: {  
   files: ['public/css/sass/*.scss',  
    'public/css/sass/**/*.scss'], //defined files to watch for  
   tasks: ['compass:dev'] //task to run after the change is detected  
  }  
 }  

and register the task with Grunt:

grunt.registerTask('watch_sass', 'watch:compass');

Now, from the command line, you should be able to run "grunt watch_sass" successfully and follow all of your changes in the files defined in "watch.compass.files" array.

Please find the full "Gruntfile.js" file below for your reference.

 'use strict';  
 module.exports = function(grunt) {  
  // Project configuration.  
  grunt.initConfig({  
   watch: { // for development run 'grunt watch'  
    options: {  
     nospawn: true  
    },  
    compass: {  
     files: ['public/css/sass/*.scss',  
         'public/css/sass/**/*.scss'],  
     tasks: ['compass:dev']  
    }  
   },  
   compass: {  
    dev: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'expanded', //nested, compact, compressed, expanded  
     linecomments: true,  
     check: true //check syntax  
    },  
    prod: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'compressed', //nested, compact, compressed, expanded  
     linecomments: false,  
     forcecompile: true  
    }  
   }  
  });  
  // plugin tasks  
  grunt.loadNpmTasks('grunt-compass');  
  grunt.loadNpmTasks('grunt-contrib-watch');  
  // Default command "grunt" or "grunt development"- compiles to production  
  grunt.registerTask('default', 'compass:prod');  
  grunt.registerTask('development', 'compass:prod');  
  // command "grunt watch_sass" tells grunt to watch for changes in your files  
  grunt.registerTask('watch_sass', 'watch:compass');  
 };  

Both plugins for Grunt "grunt-compass" and "grunt-contrib-watch" are really powerful and flexible. You'll notice that you can configure your project's deployment in many ways. What's more you'll be able to set up your grunt configuration with such plugin as "Live reload", which will basically reload the page in your browser. 

For more blog posts go to http://ds-web-dev.com/blog.

Reference:

• https://github.com/gruntjs/grunt-contrib-sass
• http://www.codebelt.com/javascript/compile-sass-files-into-one-css-file-grunt-js-tutorial/