One of the things I love most about working at UpTrending is the freedom we are given to explore and implement better practices for processes and skill sets. Better practices make us more productive, so any time an UpTrender can find an area to improve upon, it is greatly encouraged.

I recently evaluated our development asset pipeline and noticed that we might be able to reduce our compile times. We’ve always been a Sass house, so I wanted to explore ways to make that development faster.

The Problem

Having so many talented and experienced developers is awesome, but sometimes, it can actually lead to pain points. On any given project assets were getting compiled, concatenated, minified, and sometimes images compressed, all via different applications or methods based on the developer working the project.

Some people used CodeKit, others Prepros, Compass, or Grunt. All of these methods work, but some didn’t play well with other methods, and some were just downright slow (I’m looking at you, Grunt). Adapting to each different method took time, and adapting the project to a new method sometimes took even longer.

The Solution — Gulp

The hero of this story, the LeBron (GOAT, haters gonna hate) of this story, is Gulp. Using node streams instead of file I/O (like Grunt) means that Gulp can be blazing fast in comparison. After some research, and finding and tweaking two really useful resources, our team has created a Gulp setup that works for us. This setup allows the flexibility we need to get work done now, and make agile changes if we need to later.

Our Setup

Using this blog post, I was able to get a really nice Gulp setup going in minimal time. For our needs (Sass compilation, JavaScript linting, minification, concatenation, and image compression) our setup uses the following gulp plugins:

gulp-concat

gulp-uglify

gulp-jshint

gulp-rename

gulp-notify

gulp-ruby-sass

gulp-autoprefixer

gulp-minify-css

gulp-imagemin

gulp-newer

That sure looks like a lot of plugins, but trust me, this setup is still incredibly fast. It’s also really easy to maintain, thanks to this blog post on splitting Gulp tasks into multiple files in a gulp-tasks directory. This allows for easier clarity and development of large tasks in task specific files.

We’re also currently exploring the concept of add ons. The goal of add ons would be to allow different compilation settings for things like WordPress editor styling and more.

The Result

After implementing this new process, we are now seeing all of our CSS and JS functions taking up a fraction of the time they used to. In some cases, only half as long as similar functions in Grunt or CodeKit.

But speed isn’t just the only benefit of this work – we now have a unified system for building our assets. Every new project that has used this system is ready for a new developer to jump into the project with a simple npm install. Now we can all work faster and easier.