Jake Cobley

Front-End Web Developer

Saving Time with Gulp

I recently presented my talk ‘Saving Time with Gulp’ at Staffs Web Meetup, where I spoke about the benefits of introducing Gulp to front-end workflows.

Below is my write up of the talk.

What’s the problem?

The amount of content an average person consumes on a daily basis continues to increase. Much faster than the technology serving that same content. People expect the web to be fast. According to surveys done by Akamai and Gomez, nearly half of the web users expect a webpage to load in under a couple of seconds.

There’s steps we can take to optimise our websites load performance, minify the styles, scripts and compress the images but who has time to do all that manually?

What are task runners?

Task runners, put simply, run tasks. Task runners or build systems allow you to automate repetitive tasks (such as asset compilation, file concatenation and image compression). Automating these tasks saves you time and allows you to use preprocessors such as Sass and Less.

But which one?

There are plenty of task runners/build systems out there. There’s Grunt & Gulp which are the two most popular, but there’s also Brunch, Broccoli and plenty more. You could even just use npm scripts.

The important point is it doesn’t matter which one you use as long as it works for you.

Personally I use Gulp. It’s based on JavaScript which I’m already familiar with. This made it easier to get started with, it’s very popular and there’re tons of tutorials and documentation.

Overengineering

Task runners are great, but they can also be a little unnecessary at times.

Take this website as an example (putting aside the time I spent picking colours and deciding how I could remove as much style as possible), it was a quick build with very little coding. The entire site is only a few kb’s so it doesn’t really need its assets and styles minifying.

However, I still decided to write a Gulp script for it. This actually took longer than building the entire site! If this was a site I had built for a client then I’d have a hard time justifying the additional time it added for something it didn’t really need.

Where do we start?

Start small. You don’t have to overwhelm yourself by trying to do everything while learning something new. Start small and work your way up. I started by just compiling Sass to CSS. Just the one task. Then started building on it task by task.

What I use gulp for now

You can do a lot with Gulp and other task runners. I mainly work on the front-end of WordPress projects so I built a common, reusable Gulp file. I don’t have to write one for each new project.

Some common tasks my Gulp file handles:

  • Compiling Sass to CSS as well as auto-prefixing, minifying and combining media queries.
  • Compressing images.
  • Combining SVG’s into a single sprite file.
  • Minifying and concatenating JavaScript files.
  • Auto reloading/injecting styles into the browser using browser-sync.

Gulp and other task runners are great tools to save you time on repetitive tasks. The time you spend learning how to use them you will get back very quickly.

I’m going to write a follow up post which will explain how to get started with Gulp including comprehensive code examples. Be sure not to miss it!