What is Gulp?

Unless you have been living under a rock you’ll have probably heard of Gulp, the streaming build manager from the guys at Fractal.

If you have actually been living under a rock, then Gulp is a build tool that helps to speed up your workflow by automating repetitive tasks, such as optimising images and concatenating and minifying JavaScript.

Here at CDNify, we recently made the switch from Grunt to Gulp because of the flexibility Gulp offers. We also found it’s much faster and, as we are obsessed with all things performance related, the switch seemed an obvious one to make. Unlike Grunt which relies on configuration, Gulp allows you to write your build scripts in JavaScript and run multiple tasks at the same time.

Building super fast, lightweight pages is important to us and Gulp helps us achieve this. In this article, we’ll look at the various plugins we use in our build process and highlight our top 10 Gulp tasks for optimising front end performance.

Browser Compatibility

To ensure compatibility across all browsers and to cut down on our testing time, we use Auto-Prefixer. It’s a post-processor that allows you to write CSS rules without worrying about vendor prefixes. Once you’ve run Auto-Prefixor it reference’s data on current browser popularity and support to apply prefixes for you. Best of all because it’s a post-processor you can use it alongside preprocessors like SASS and LESS.

Compiling CSS

To compile our CSS we use Gulp-SASS. In terms of speeding up your workflow SASS is particularly useful as it allows us to treat CSS in a modular fashion, which makes it much easier to maintain and scale. If we need to change a colour value this only needs to be done once and allows us to create reusable blocks of styles that only need to be defined once 🙂 If you’re not sure where to get started with SASS then check out The SASS Way, which has an awesome collection of resources.

Minifying CSS

Minification removes unnecessary characters in your CSS such as line breaks, spaces, and indentation. Whilst useful at the development and debugging stage, these characters are superfluous in production, so it’s considered good practice to remove them before shipping your code. We use Minify CSS to make sure our CSS is as compact as it can be.

Removing Unused CSS

Whilst there’s no doubt that using a CSS framework like Bootstrap is a big time saver, they can often be incredibly bloated. To avoid shipping the entire framework to production and remove any unused styles in our pages we use UNCSS. Also worth mentioning that this plugin is built by our front end developer Ben.

Inline CSS

The main advantage of using inline styles is that your tags can be styled individually. Because they have the highest precedence, if for whatever reason you can’t change the external style file, you can use inline CSS to override your default CSS for a specific tag. Whilst it’s great for testing, quick fixes, and reducing HTTP requests, it’s generally not considered best practice to use inline CSS in production. However, we use a plugin called Inline CSS to apply our CSS attributes inline in our HTML email templates and ensure they are rendered properly in browser.

Minifying SVGs

We are big fans of SVGs at CDNify, but they can be incredibly bulky! We use SVG-Min to ensure that all unnecessary information (like meta-data and hidden comments) is removed and the file that’s rendered is as small as possible. Like UNCSS, this was built by our front-end developer Ben.

Creating Icons Fonts

To convert multiple SVGs into icon fonts, we use a plugin called (rather unsurprisingly) IconFont. This allows us to treat our icons like our fonts and use CSS to style them. Performance wise they’re relatively small, use less HTTP requests, and are even supported by IE (if you still use IE that is).

Minifying JavaScript

We use UglifyJS to combine and minify JavaScript assets into one compressed file. This reduces HTTP requests and the amount of code your users need to download, meaning your site can load faster. Minifying your JavaScript typically reduces your file size by about 30% to 90%.

Concatenation

One of our biggest requirements whenever we develop anything at CDNify is to ensure that our code is modular and lightweight. We use Concat to combine multiple JavaScript or CSS files into one. This ensures optimised performance by reducing the load on the sever and the number of requests the user has to make.

Start Experimenting!

Even the tiniest delay in your websites load time can result in negative user experience and lost revenue. Whilst the build process we use at CDNify might not be for everyone, there are countless plugins available for Gulp so finding the right mix is just a matter of experimenting. If your site is optimised for performance, users will be happier and will thank you for it.

If you are currently using Gulp to automate your workflow then let us know what plugins you are using in the comments below.