Article

Gulp for Designers - Getting started with Gulp.js

If, like me, you shy away from writing commands in Terminal and Javascript can often leave you scratching your head more times than you’ll care to admit, then it’s very likely you’ve not had the guts to tackle 'Gulp.js' yet? Well it’s time to pluck up the courage.

gulp-for-designers-getting-started-with-gulp-js.jpg

This article has purposefully been written to take the fearful designer through the basics needed to get started with ’Gulp.js’ and hopefully leave them feeling more confident with using terminal based tools. Specifically, we’ll look at how to install Gulp on your machine, how to install Gulp plugins, run tasks and how to pipe multiple tasks together to help speed up your front end development workflow.

If you are new to the Terminal I recommend taking a quick crash course on basic Terminal commands. You should find this handy guide on Tutsplus helpful.

 

Hold on! What is Gulp.js anyway?

Gulp is a build system that carries out tasks on your front end code. For example, concatenating and minifying Sass files into CSS. Gulp is built on top of Node.js and referred to as a Node Module. Don’t worry, it’s not essential you know too much about Node. However, you will need to have Node.js installed on your machine. Also, be aware that at the root of any Gulp project there is a folder called node_modules. This is where Gulp and your Gulp plugins are installed.

If you do not have Node.js installed on your machine you can find out how to do so here:

After installing Node.js it's time to get down to business.

 

Installing Gulp

First, we need to install Gulp globally on our machine. This is common practice and allows for Gulp commands to be executed anywhere in your file system. Open up terminal and execute the command below.

Github Gist Placeholder

If you have having issues installing Gulp successfully you may have to prefix this command with sudo. This allows you admistrators privilages on your machine.

Npm stands for Node Package Manager. We have to use this to handle installing Gulp. The -g declares this command as a global operation.

Over time you will find that every project is different. Gulp plugins are referred to as a project’s devDependances and can be unique to every project you work on. Baring that in mind, as well as installing Gulp globally on our machine, we install Gulp locally on a project per project basis. This helps with running and managing devDependances unique to different projects.

After installing a devDependancy, the name of the plugin and version is saved to a package.json file stored at the root of your Gulp project. This file needs to created in your project manually. You can find a boilerplate for a package.json file here on Github.

Make sure your package.json file is at the root of your new project. In terminal navigate to the new project and execute the command below to install Gulp locally.

Github Gist Placeholder

If we look inside our package.json file we now see the latest version of Gulp has been saved as our first devDependancy on this project.

Github Gist Placeholder

Great! That’s the hard part over with. Now for the fun part.

 

Installing Gulp Plugins

We install plugins the same way as we installed Gulp locally on our machine. For this guide we want to create a Gulp task to run on the Sass files in our project. We want the task to do the following:

  1. Concatenate our Sass files together and output one CSS file.
  2. Minify the output CSS file.
  3. Finally, change the name of the output CSS file accordingly.

Therefore, this task requires the following Gulp plugins:

Head over to terminal and install these plugins by executing the command below:

Github Gist Placeholder

If you check your package.json file you’ll now see all the Gulp plugins we’ve just installed declared as devDependences on this project.

Github Gist Placeholder

You will notice that beside each dependency there is a version number. As discussed earlier each project is different and could require different versions of dependencies. Declaring a version makes managing and installing dependencies much easier.

Now that we have our plugins installed we can move onto to creating our task.

 

Creating the task

For somewhere to write our task we need to create a gulpfile.js file at the root of our project. We must then tell Gulp what plugins we require for the task. We do this by writing the following at the top of our gulpfile.js file.

Github Gist Placeholder

Now to write our task. We’re going to tell Gulp to reference the main Sass file that declares the @imports. Take note that before the function starts we are giving the task a name of sass-to-css-please.

Github Gist Placeholder

We then want to pipe our plugins into the task to achieve our objectives. Best practice is to take a new line for each new pipe.

Github Gist Placeholder

We have a working Gulp task!

 

Running the task

Go ahead an create some Sass files in your project for the to task to run on. Simply type the following command in terminal below to run the task:

Github Gist Placeholder

Ta-Da! You successfully ran your first Gulp task!

If you’d like to download the files associated with this article you do so on Github.


Further reading

image.jpg

I am a designer specialising in creating beautiful, usable, responsive interfaces with an ardent focus on user experience. I tailor each project to the individual needs, flairs and preferences of my clients to achieve a great digital experience. I love quality coffee and retro games consoles.

Alistair's Reading List

Medium

Medium

To Sketch, or not to Sketch? And€” Exploring Material Design.

And other essential questions about (Material) Design. Read more

Louder Than Ten

Design machines

A dystopian view of an internet designed by machines, and the mushy, emotional weapons we can use to fight back. Read more

InVision Blog

InVision Blog

Communicating your way to stress-free design projects - InVision Blog

Too many talented designers fall short in their client interactions. Do these 9 things to make sure you communicate effectively.

Read more

Advertisement

Digital Ocean