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, rungem 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
.