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.
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.
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.
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.
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.
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.
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).
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.