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
So, first thing’s first: install Node. Pretty straightforward, just install it for your platform.
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:
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.
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.