###Getting Started with Grunt

• Grunt Documentation
• Node.js Documentation
• Smashing Magazine Grunt Tutorial

Grunt is a JavaScript task runner. In short, it can help optimize production and do a lot for you. It can minify and concatenate files. It can run sass for you. It can even run autoprefixer and prefix all your CSS.

###1. Install Node.js Install Node.js from their website. Node.js allows you to write server-side JavaScript. HTML, CSS, and JS are client-facing scripting languages. Client-facing means they are languages that manipulate what the client (user) is actually seeing. Server-side means languages that deals with the back-end of websites (like retrieving data from databases).

###2. If you already have Node.js installed, update npm npm stands for Node Package Manager. It allows you to download and manage plugins your project may be dependent on (called dependencies).

Run the following in terminal to ensure npm is up to date.

npm update -g npm

###3. Install Grunt using npm In the terminal, use npm to install grunt. The following command will download grunt to your computer and allow you to use the term grunt in your terminal.

npm install -g grunt-cli

###4. Add package.json and GruntFile.js into main project folder and edit Ensure that you are in you project folder in terminal and run npm init. Follow the directions and answer the questions in terminal. This walkthrough is setting up your package.json file. If you don’t know the answer, hit Enter and leave it blank.

For your GruntFile.js, create the file but leave it blank for now.

##Setting up Grunt with Tasks (Sass and Auto-Prefixer) We will be setting up grunt so all we have to do is type in one command into terminal and it will run everything for us, like compile sass into CSS. We will also be using autoprefixer (website here). autoprefixer adds prefixes like -webkit- to our CSS so we don’t need to.

###1. Add dependencies to package.json We need to tell grunt that we are using sass and autoprefixer. To do this we must edit package.json (with lists the packages we will be using).

Add the following to package.json before the last }.

"devDependencies": {
  "grunt": "^0.4.5",
  "grunt-autoprefixer": "^3.0.3",
  "grunt-contrib-sass": "^0.9.2",
  "grunt-contrib-watch": "^0.6.1"
},
"dependencies": {
  "compass": "^0.1.1"
}

###2. Tell grunt what to do in GruntFile.js Paste the following into GruntFile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
      	files: {
      		'a/css/screen.css' : 'a/sass/screen.scss'
      	}
      }
    },
    watch: {
    	css: {
    		files: 'a/sass/**/*.scss',
    		tasks: ['sass', 'autoprefixer']
    	}
    },
    autoprefixer: {
      options: {
        browsers: ['last 2 version', 'ie 8', 'ie 9']
      },
      single_file: {
             src: 'a/css/screen.css',
             dest: 'a/css/screen.css'
      },
    }
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.registerTask('default',['watch', 'autoprefixer']);
}

This is telling grunt what to do and when to do it. It is setting up our tasks. The last line, grunt.registerTask, is setting the term we use in the terminal to get grunt running. When we are in our project in terminal, and run the term grunt (which is the default term), the watch and autoprefixer tasks will run. watch watches all files in a/sass/**/*.scss. Meaning, any file ending in .scss in a/sass. If any of these files change, it runs the task sass and autoprefixer.

You want to change files: 'a/sass/**/*.scss' to match where your css files are. Along with 'a/css/screen.css' : 'a/sass/screen.scss' and single_file: { src: 'a/css/screen.css', dest: 'a/css/screen.css'}.

###3. Download all dependencies Go back to your terminal, again, make sure your are in the root of your project in terminal, and run npm install. You may get an error and need to run it with sudo. A new folder, node_modules should appear. Do not touch this. It has all your plugins/dependencies that your project needs. npm automatically downloads what you need (specified in package.json). You can create a file called .gitignore so git ingnores all these folders.

###4. Run Grunt! In the terminal, run the command grunt. You should now see something like Running "watch" task and Waiting.... This means it is running. Try it out! Change your CSS and confirm everything is running.