Getting Started with Grunt and Sass

You've probably heard of Grunt, the JavaScript task runner that runs on Node.js. Maybe you've tried to get it up and running, but got lost or confused during setup. Maybe you know of it, but aren't sure how it can be useful or if it's worth the time invested.

I'm going to show you how Grunt can be useful, and I'm not going to throw command lines at you and assume what you might already have installed. I'll let you know exactly what you need to install, and in what order, to start optimizing your workflow.

What is a task runner?

Grunt and Gulp are currently the two most popular JavaScript task runners. The purpose of a task runner is to automate all your processes so you don't have to think about them.

For us, this is going to be compiling our CSS preprocessor - Sass in this case, but the steps are the same for LESS - apply vendor prefixes for cross-browser compatibility, and minify the CSS for speed. We'll also be minifying JavaScript.

What is Node.js?

JavaScript is, and has always been, a client-side programming language, which means it's processed by the browser. With the advent of Node.js, JavaScript can also be used as a server-side language. Grunt runs in this environment.

How about npm?

Ah, npm - Node Pacakage Manager. Don't let this be a source of confusion for you. Npm is just the package manager for Node.js, which just means it's the tool to connect to the giant repository containing all the Node.js programs, plugins, modules and so on. Use the npm command to install everything that runs on Node.js.

The most important thing to learn about npm is the difference between local and global installs. Understand right now that you can't do everything globally with npm! I cannot stress this enough. It was the basis of all my confusion when I was learning.

Local vs. Global

There has to be a local and global version of npm - it's just the way it is. Don't fight it. What does that mean? It means we're going to install Grunt CLI globally - so I can run grunt in the command line at any time - and all the plugins and packages will go into local installs. If I'm working on mypersonalblog.com and clientwebsite.com, they both need their own npm install. I'm sorry. This is not a simple concept to understand at first. I certainly didn't.

The command for local npm is npm, and the command for global npm is npm -g. Anything we do with -g affects your whole computer, and any regular npm command will only affect the current working directory.

Installation

Here are all the steps to get everything up and running.

Install Ruby

Sass runs on Ruby, so we need to have that installed. The Ruby programming language is already preinstalled on OSX. You can check this by opening Terminal and typing ruby -v to check the Ruby version number you have installed.

Install XCode

XCode is a free download from the app store. You can check if you have XCode installed already by typing make in the Terminal. After you download it, install Command Line Tools: Preferences > Downloads > Command Line Tools. This is necessary for the next step. (Note: This step is no longer necessary as of 2017 - Homebrew will install XCode Command Line Tools for you.)

Install Homebrew

Homebrew is a useful program for installing other programs. So meta. Type this into the command line.

Follow the steps - you'll have to agree to installing brew and enter your password. You can type brew doctor to verify that Homebrew has been successfully installed.

Install Node.js

We're going to use Homebrew to install Node.js.

brew install node

Install Grunt CLI globally

Finally, we can install Grunt. We're not actually installing Grunt, but the Grunt command line interface (CLI). This basically just allows your computer to recognize the grunt command at all times. However, without a local install, you can't actually use Grunt.

npminstall -g grunt-cli

Here's the good news: everything you just did, you won't have to do again. Node.js is installed, Homebrew, XCode, Sass, Ruby. Maybe you'll have to update them every now and then, but the point is that you have them. This is going to help with a lot of installations in the future.

Everything from here on out is going to have to be done on a project-by-project basis.

Create package.json in a local directory

Alright, now we start learning the Grunt and npm specifics. Any project that runs on Node.js requires a package.json. If you've never seen or used a JSON (JavaScript Object Notation) file before, don't be too concerned. It's basically JavaScript.

The first several entries are self-explanatory. name is the name of your project; you can give it a version number, description and a license to cover all your legal bases.

devDependencies are the plugins your project depends on to function. Package.json is very cool, because you can define them all here, and when you install npm, it will install all of your plugins along with it. I'm putting the current version of Grunt, which is 0.4.5. I'm just going to tell it to install the latest version of each individual plugin. I'm sure there might be a specific case where you'd want to install a specific, older version, but I can't see why we would do that in this situation.

This might come up, which doesn't matter. Grunt wants you to have a README.md and a repository set. You can choose to create one and add it to your package.json, but it's not required. Here's the code for that.

Register Grunt tasks

Finally, register your task. The 'default' task is what will run when you type grunt into the command line in your local project. The only task I'm going to run is 'watch', because all the rest of my plugins will compile into that task. Close all your brackets at the end of the file.

Project Setup

The project setup is going to be very simple. We just want to make sure it works. The specifics can come later. I'm just going to make an index.html that links to css/style.min.css and js/script.min.js. I'm going to make two Sass files to compile into one minified CSS file, and minify my script.js as well.

Here's the directory setup.

Any Sass file (which has a .scss extension) is valid CSS, you're good to go here even if you don't know any Sass yet. The Sass Guide is a great introduction.

UglifyJS

Watch

Here's the most important task of all (in my opinion) - the watch task. Everything that I've previously told Grunt to do, I will now stick into a single command. When I run this command, Grunt will watch for any file changes and apply all the plugins.

Join the newsletter

I write about JavaScript, programming, and front-end design. Join over 6,000 other developers in keeping up with my content. Unsubscribe whenever. Never any spam, ads, or affiliate links.

I'm Tania, a full-stack software developer specializing in modern JavaScript. I make
open source coding projects and write free, quality articles and tutorials that help
thousands of people daily. No ads, no sponsored posts, no bullshit.