#Get up and running with Grunt

Grunt is a JS task runner build tool that runs on Node. It helps automate time-sucking-consuming tasks such as compressing your CSS files, minifying JavaScript or producing a set of responsive sized images.

Another added benefit is it helps ensure that everyone on the team is working with a unified set of commands, writing code to the same standard.

#Part 1 Environment

Before setting up Grunt ensure that npm is up-to-date ( installing npm ).

Run npm update -g npm

What you will need for this project

Check your dependancies

node -v
ruby -v
grunt --version
sass -v

If you do not have the requirements

  • Download and install Node.js and Ruby from the website.
  • Install SASS: gem install sass
  • Install Grunt by executing npm install -g grunt in your command prompt.

  • Install Grunt command-line interface npm install -g grunt-cli.

      Note: On linux or OS X you may have to prepend the above commands with sudo.

#Part 2 Files and plug-ins

Start with Package.json file

In the root of your project folder use npm init to create a basic package.json file. This file keeps track of your project description, git repo, & npm dependencies.

name: <ProjectName>
version: <0.0.1>
descriptioin: <grunt demo>
entry point: <index.html>
test command: <>
git repo: <>
keywords: <grunt>
author: <your name>
license: <opensource.org>

While Grunt at this point has been installed globally, you still need to add Grunt to your project folder.

Adding Grunt to your project folder

npm install grunt --save-dev

DO NOT EDIT the node_modules directory, NPM will take care of all that for you.

TEST: grunt --version result grunt-cli v0.1.13

( version may differ )

Create a Grunt file

Create a file named gruntfile.js, it defines your tasks, and keeps track of your plugins in the project.

Sample of a skeleton gruntfile.js:

	module.exports = function(grunt) {

	 	// Configure your task(s)
		grunt.initConfig({
			pkg: grunt.file.readJSON('package.json'),
		});

	 	// Load the plugins
		grunt.loadNpmTasks();

	 	//Register task(s)
		grunt.registerTask('default', [ ]);

	 } // end exports

Adding a plugin to grunt via the command-line:

npm install <plugin-name> --same-dev

Less add SASS ;-)

  • Install Grunt SASS to our project:

npm install grunt-sass --save-dev

There are three parts to configure.

  • Add configuration connecting to package.json
  • Load Setting up your task in gruntfile.js
  • Register adding the plugin to gruntfile.js

Check Configuration

Check your package.json file, you should see something like this at the botom.

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-sass": "^1.0.0"
  }

Load the plugin

`grunt.loadNpmTasks('grunt-scss');`

Register the task

`grunt.registerTask('default', ['sass:dev']);`

###Expanding SASS for a Dev and Build environment

We don’t always want to minify our code as that would make it hard to de-bug errors. So setting up a Dev and Build option for our project would be a nice feature.

sass: {
	test: {
		options: {
			  style: 'expanded',
	      sourcemap: 'none'
	    },
		  files: {
	           'EWUCanvasTest/NewUIOverride.css': ['Source/css/NewUIOverride.scss'],
	           'EWUCanvasTest/overrides.css': ['Source/css/overrides.scss'],
	    }
	},

	build: {
	  options: {
	      style: 'compressed',
	      sourcemap: 'none'
	    },
	    files: {
	             'EWUCanvasTest/NewUIOverride-min.css': ['Source/css/NewUIOverride.scss'],
	             'EWUCanvasTest/overrides-min.css': ['Source/css/overrides.scss'],
	    }
	},
}

Under Options, style is the type of output selected.

  • nested
  • compact
  • compressed
  • expanded

We are set up to run either grunt sass:dev or grunt sass:build as a command.

My gruntfile example:

module.exports = function(grunt) {
    // Configure tasks
      grunt.initConfig({
  		pkg: grunt.file.readJSON('package.json'),
        sass: {
            test: {
    					options: {
    						  style: 'expanded',
                  sourcemap: 'none'
                },
    					  files: {
                       'SourceTest/NewUIOverride.css': ['Source/css/NewUIOverride.scss'],
                       'SourceTest/overrides.css': ['Source/css/overrides.scss'],
                }
            },
      			build: {
      			  options: {
                  style: 'compressed',
                  sourcemap: 'none'
                },
                files: {
                         'SourceBuild/NewUIOverride-min.css': ['Source/css/NewUIOverride.scss'],
                         'SourceBuild/overrides-min.css': ['Source/css/overrides.scss'],
                }
      			},
        },
        watch: {
          css: {
            files: '**/*.scss',
            tasks: ['sass']
          }
        }
    });
    // Load the plugins
      grunt.loadNpmTasks('grunt-sass');
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-watch');
    // task setup
      grunt.registerTask('default', ['sass:test']);
      grunt.registerTask('build', ['sass:build']);
};

List of plug-ins


House keeping: It’s recommended to keep your node, sass, cache, and tmp files out of your repo.

To do so, add the following to a .gitignore file:

node_modules
.npm-debug.log
tmp
.sacc-cache
*.css.map

###Further reading