Build tools for beginners: Using Gulp (Part 1 of 2)

Intro to Gulp

If you already know what gulp is and understand its benefits, skip down to Installation.

What is a build tool and what is Gulp? Why should I care? Let’s identify some common pain points for beginning developers who have not been introduced to build tools.

• Concatenating JavaScript files every time you want to check if your code works.
• Copy and pasting all your code in jslint.com, or some other code quality tool to figure out where you bug is.
• Refreshing your browser every time you want to see the output of your most recent code.
• Copy and pasting all your code into an online minifier every time you want to see how fast your app truly is.
• Point is: there are too many tedious and mundane tasks that continually need to be completed when building web apps.

Fortunately, one of the biggest reasons software even exists is to automate repetitive tasks in order to make our lives easier. We as developers can leverage this inherent quality to automate the very tasks that need to be completed to build the software itself. Pretty cool stuff.

This is precisely what Gulp helps us do: automate tedious and mundane tasks.

Installation

Before installing anything, make sure you have your directory structure set up for your project, and navigate to the root directory of your project in the terminal.

Gulp needs Node.js and NPM (Node Package Manager) to run, so we’ll have to install these first (don’t worry, it’s very easy). If you don’t know what Node.js is, think of it as the framework that Gulp needs in order to function (like a railroad for a train).

Another thing to know is Gulp alone doesn’t provide you with all the functionality to automate all these tasks. It relies on software packages, also known as “dependencies”, to do so. Simply put, NPM allows you to download these packages (Gulp being one of them).

1. To check if you already have Node.js installed, go to your terminal and type:

node -v

If you see a version number returned, then Node.js is already installed. Otherwise, use these instructions to install it on a Mac, and these instructions on a Windows computer.

2. Great! Now to install Gulp, type:

npm install -g gulp

If this doesn’t work, add the word “sudo” at the beginning of the previous command, and try it again.

Again, you can check to see if Gulp is installed by running the following command and seeing a version number returned:

gulp -v

3. The next thing we need to do is initialize your project. Type:

npm init

You’ll then need to confirm a few details about your project by hitting enter. Don’t worry about most of the details you have to confirm, you can leave them blank for now. Just enter in the correct project name and author (you).

Once you’ve completed this process, take a look at your directory tree. See anything different? You should now see a package.json file in the root directory of your project. If you open this file, you’ll see many of the details you entered in during the previous step.

4. The next step involves installing all the software packages (or dependencies) I mentioned earlier, with Gulp being one of them. In the terminal, enter in:

npm install --save-dev gulp

By inserting the --save-dev flag, we’re saving gulp as a dependency to our project. It’s basically saying, “Hey NPM, install gulp and save it in my project because it needs gulp to function!”

You’ll now see a node_modules directory in the root directory of your project. This directory stores all the software packages you’ve installed using NPM. No need to mess around with it, let it do its thing.

5. Now comes the fun part — we can begin installing all the cool software packages that allow us to automate all those tedious tasks! NPM has over 2,000 software packages (also called “plugins”) you can choose from. For the sake of efficiency, I’ll share with you a few of my favorite plugins.

Live Reload: refreshes your browser page whenever you save a file.

JSHint: a code quality tool that helps detect errors and bugs in your code.

Concat: concatenates files so you can use them in production.

UglifyJS: minifies your javascript.

Minify HTML: exactly what it sounds like.

ImageMin: minifies all image files in your project.

Notify: send you a desktop notification (maybe my favorite).

To install a plugin (Live Reload and UglifyJS, for example), you’ll run a similar command as installing gulp:

npm install --save-dev gulp-livereload gulp-uglify

You can install one plugin at a time, or as many as you want with one command. Check each plugin’s page on the NPM website for its specific install command. Also make sure to include the --save-dev flag when doing so.

If you navigate to your package.json file, you should see all these plugins listed under devDependencies.

Wrapping Up

I hope this tutorial helped you get on your feet with the Gulp build tool. The second part of this tutorial will show you how to build scripts that allow these plugins to do their job in your project.

Stay tuned. Hope this helps :)

-Amit