Smooth and Stunning Display

We are always being confronted with the challenge of building not only one, but many first class websites—the development team needed to conjure a recipe up that could speed up production and improve website quality at one fell swoop. Accepted.

We are always being confronted with the challenge of building not only one, but many first class websites—the development team needed to conjure a recipe up that could speed up production and improve website quality at one fell swoop. Accepted.

Enter “build tools”. Powered by JavaScript and crammed full of awesomeness.

Build tools are incredible. The way they clean up prettify a project’s code can be seen of as the icing used to craft and decorate a multiple-tier wedding cake. Choosing one application framework that keeps every developer happy to work with though, can be a problem.

Why Gulp? Gulp is a blisteringly quick and powerful tool used for website building

We chose Gulp because of its speed and power; also because of its impressive industry adoption rate, and the buzz around it. Having community support and contributions is really where the culture of open software serves itself to use well.

Gulp runs on Node.js, the massively popular serverside (JavaScript engine - Node.js has amazing technical power, but that detail can be discussed in another article). The point is that it provides many people with the tools, framework and community resources, which helps improve a developer’s skillset on all levels! Problem solved.

We have set up our Gulp pipeline to be flexible; each part or function can be switched on or off accordingly. Let’s take two of these parts as examples to explain what kind of functions Gulp offers:

Example

Scripts

Scripts can be found everywhere on our sites, before it reaches a browser. Each script is isolated and discrete from every other functionality (which is important to know from a developer’s point of view). That does, however, makes for slow loading times and on page performance. You might notice some laggy frames on videos or jagged scrolling. The function runs through every script across the site and collects them all into one unified script file. While busy, it pipes this file to an application that minifies and compresses it - super slick and lightweight.

Styles

Copy the concept of how the scripts got squished into an efficient package here, but add post-processing. Being graceful in degradation also means your handwritten style sheets should be spiced up automatically, so to support various (and sometimes older) browsers. It’s basically smart enough to know which version prior to the major release you want covered, and runs off the caniuse.org website’s always-up-to-date feed, so you’re still trending on the screens of the technologically less-fortunate.

 

Have a Gulp and a smile! The effects we achieved returned more reward than ever thought possible at offset. It did take time to research, exhaustively test, and with patience, implement it into production- but for the rewards achieved, we would do it all over again!