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 is used for version control of files. There is an installer available for download on Git's website. 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, which is the programming language that Grunt and Gulp and the modules they run are built in. To install, go to the Downloads 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 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 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, and specific plugins for Grunt can be found at gruntjs.com/plugins and for Gulp at 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