November 5, 2015

Front-End Workflow with Grunt, Part 1

by Cory Hughart

Hello! I’m Cory, the newest member of the Blackbird development team. With Halloween just past, I’m going to kick off my first post by talking about something scary: front-end workflows.

I’m not going to take up your time extolling the virtues of SASS over vanilla CSS or trying to convince you that using Grunt is the only way to work these days; you’ll find plenty of that elsewhere, and perhaps I’ll eventually write one of those posts. Today, I want to pull the curtain back and give you a glimpse into what it takes to build a workflow with these tools. Maybe it won’t be so scary after all.

In this “part 1” post, I’ll go over getting Grunt and it’s dependencies installed.

Node, NPM, and Grunt

Keeping things brief, Grunt is a Node module that reads a JavaScript file and runs the tasks defined in it. Node is a JavaScript runtime environment, allowing you to run JavaScript code directly on your computer without needing a web browser to do it. NPM (Node Package Manager), included with Node, is how you’ll install Grunt (and many other Node modules).

So, first thing’s first: install Node. Pretty straightforward, just install it for your platform.

Installing Grunt

Next, open your command prompt (didn’t I say this would be scary?): cmd.exe on Windows, Terminal on Mac (Linux users, you know what to do). Install Grunt globally by running the following command:

NOTE: I’m going to assume you’re on Mac/Linux for the rest of this post. If you’re on Windows, remove any “sudo” that you see in these commands.

sudo npm install -g grunt-cli

At this point, you’ll need to create a project folder somewhere and navigate into it in the command prompt. As an example, this will make a folder called “project” in the current working directory, and then navigate into it (same commands on Mac/PC/Linux):

mkdir project
cd project

You can, of course, just create this folder using Finder/Explorer, but you need to “change directory” into it.

Initializing your project with package.json

Now, we need to create a standard Node file that contains information about the project. NPM will create it for us after asking some questions with this command:

npm init

Here’s an example of the questions and how to answer them (stuff in parenthesis are defaults that will be applied if you leave it blank):

name: (project) my-project
version: (1.0.0)
description: example grunt project
entry point: (index.js) Gruntfile.js
test command: console.log('hello world!');
git repository: https://github.com/username/project.git
keywords: example
author: Cory Hughart <email@example.com>
license: (ISC) MIT

If you’re not planning on publishing a node module, most of that won’t matter much, but the file itself is important for specifying which modules we need.

Installing modules

The first module we need to install into your project is Grunt itself. We already installed the Grunt command line interface globally, but we need a local copy of Grunt in your project. This is mostly so that, when you come back to this project in 3 years, you can still run your workflow with the version of Grunt you were using at the time you started the project.

npm install grunt --save-dev

This will install grunt into a node_modules folder, and the “--save-dev” bit will write to your package.json that Grunt is a “development dependency” to your project. This is important when you get into version control and sharing your code with others. You don’t need to keep/share the node_modules folder; simply using the command “npm install” in a folder with your package.json will read your devDependencies and automatically install them.

Here are the other modules I usually install:

In the next post, I’ll talk about the “Gruntfile” and how to run tasks that use those modules to make your life as a front-end developer so much easier.