---
title: "Prepare for Front-End Work with Node.js, npm, and Grunt/Gulp"
description: "Today, our lives as developers are a bit more complicated than they were ten years ago. There are countless frameworks, tools, and best practices to utilize."
date: 2020-02-02
author: "Christofer Sandin"
canonical_url: "https://www.republic.se/en/articles/prepare-for-front-end-work-with-node-js-npm-and-grunt-gulp"
section: "Articles"
---

# Prepare for Front-End Work with Node.js, npm, and Grunt/Gulp

Today, our lives as developers are a bit more complicated than they were ten years ago. There are countless frameworks, tools, and *best practices* to utilize. The question is whether we might be using more than necessary in many cases, but that might be a topic for another article.

A balance is needed between the tools used to simplify our daily tasks and the complexity they introduce. We aim to find a good balance and do not go *all in* with every conceivable tool; instead, we try to use so-called task runners like **Grunt** and **Gulp** to automate tasks such as compiling Sass to CSS and merging and minifying JavaScript. These are examples of tasks we perform daily in all the projects we work on, making them suitable for automation. Automating the creation of a favicon, however, is something that is done once per project, so there I believe the complexity does not outweigh the benefit…

From time to time, you need to start over with a new computer, and this is a small guide on how to prepare your computer to jump back into projects and continue working.

In our case, this means we will install the components needed to use **Git**, **Sass**, **Grunt** (or **Gulp**) on a Mac to continue working on existing projects.

First, we will install everything and ensure everything runs smoothly, but there are also a few short sections at the end with a quick reference for those who need to update and add components using **npm**.

The plan is to install the following tools and then clone an existing project to get started with local development on a new machine:

- Git
- Node.js and npm
- Grunt / Gulp
- Sass

Once this is done, it will suffice to perform the last step "Clone a project, run `npm install`, and then `grunt watch`" for future projects.

Let’s get started.

## 1. Install Git

[Git](http://git-scm.com) is used for version control of files. There is an [installer available for download on Git's website](http://git-scm.com/download/mac). Just download and install it like any other app…

Then, it’s sensible to configure Git using the following commands:

```
git config --global user.name "John Doe"
git config --global user.email "john.doe@republic.se"

```

## 2. Install Node.js

It’s time for [Node.js](https://nodejs.org/en/), which is the programming language that Grunt and Gulp and the modules they run are built in. To install, go to the [Downloads](https://nodejs.org/en/download/) page, download your version, and run the installer.

Now `node` is available in the terminal along with its package manager `npm`.

To avoid having to run `sudo` before installing various tools on Mac OS X, you need to change where npm saves all global packages. Run the following in the terminal to change the location where the packages are saved to the **/.node\_modules\_global** directory and reinstall npm there:

```
cd ~
mkdir .node_modules_global
npm config set prefix=$HOME/.node_modules_global
npm install npm --global

```

The last step is to add the new path to your **/.bashrc** so that Bash finds the right one (or **/.zshrc** if you are using Zsh). Open the file and add the following line:

```
export PATH="$HOME/.node_modules_global/bin:$PATH"

```

## 3. Install Grunt and Gulp

In a project, a so-called *task runner* is used to run our commands. We usually work with **Gulp**, but we also have projects where we use **Grunt**. It doesn’t really matter much, but there are some different pros and cons that we don’t need to go into here. For safety, we will install both. These packages are installed globally, meaning they are available everywhere on your computer and not tied to any specific project.

First, we will install Grunt’s *Command Line Interface* (CLI) globally using:

`npm install -g grunt-cli`

Then you can verify that Grunt’s CLI works by typing `grunt`.

If you are not in a directory prepared for Grunt, you will get an error like *Fatal error: Unable to find local grunt*. This is because we have not installed Grunt for the project and you are missing a **Gruntfile.js** – but we will change that when we clone a project.

Next, we will install Gulp’s *Command Line Interface* (CLI) globally using:

`npm install -g gulp-cli`

Similarly, you can test that Gulp works by typing `gulp`. And just like before, you will likely be missing a local installation of gulp and a **gulpfile.js**. But as mentioned, we will change that soon; first, we just need to install Sass.

## 4. Install Sass (optional)

Sass was originally written in the Ruby programming language. However, **nowadays there are faster versions such as Dart Sass.**

You can install Sass in each project, but it can also be beneficial to install Sass globally if there is a need to use it without a lot of dependencies from time to time.

[Sass](http://sass-lang.com) is installed globally in the terminal on Mac OS X by typing:

`npm install -g sass`

After installation, you can check that you have the correct version installed by running:

`sass -v`

## 5. Clone a Project, Run `npm install`, and Then `grunt watch`

Now we have a local environment ready to start working in. It’s time to clone a project and get started. You can do this either in an application like [Tower](http://www.git-tower.com/) or via the command line.

```
cd /Sites/
mkdir projectname
git clone user@your-git-repo-domain.com/reponame projectname
cd projectname

```

Usually, there are no Node modules included in the repo; instead, these are installed for each project. Here, we assume there is already a file named `package.json` set up and ready in the project, so you just need to run:

`npm install`

and wait while all components are downloaded.

Then there is likely also a file named **Gruntfile.js** if you are using **Grunt** in the project. So now that everything is set up, you can simply run `grunt` to execute all the so-called *tasks* included in the standard run and then:

`grunt watch`

to monitor Sass and JavaScript files and compile them on changes.

If it’s a project where you are using **Gulp**, the process is similar. Look for the file **gulpfile.js** and run it with `gulp` and `gulp watch`.

## 7. Advanced Course

Here is a small list of the most common commands for `npm`.

### Install and Uninstall Local Modules with npm in a Project

While `grunt-cli` is installed globally as we did above, it’s quite sensible to install Grunt and other modules in each project.

All npm modules can be found at [www.npmjs.com](https://www.npmjs.com), and specific plugins for Grunt can be found at [gruntjs.com/plugins](http://gruntjs.com/plugins) and for Gulp at [gulpjs.com/plugins](https://gulpjs.com/plugins).

Install by:

`npm install grunt --save-dev`

and uninstall by:

`npm uninstall grunt`

### Install and Uninstall Global Modules with npm

Similarly, you can uninstall global packages by adding the **-g** flag:

`npm uninstall -g grunt-cli`

### List Which Global Modules You Have Installed

`npm list --global --depth=0`

### Update Your Global npm Modules

From time to time, it can be good to review your global npm modules and update them.

Check which ones have updates by running:

`npm outdated -g`

and then update them by typing:

`npm update -g`