How Gulp helped me to deal with tech debt

Some folks from my hometown have a news site and they needed some new stuff and little tweaks on the design. After looking at the code I said that I would only work on it if they gave me the time to improve loading times and clean a little bit of the code.

And you know what, it wasn't that bad. At the beginning I didn't know how to work around this and get a good output at the end. Two things came to help me in a big way: Gulp and LESS.

# Organizing the styles

When I received the permissions to put my hands in the code the first little thing that made me open my eyes wide was a seven thousands lines style sheet. Bad indentation all the way and of course not the best practices on CSS, impossible to maintain and detect unused styles so the first thing I did was to pass the entire file through a CSS to LESS process.

You can find CSS to LESS online processors on the web, they don't take all the advantages of the LESS language so I had to go line by line and fix a couple of lines to really look like a nice LESS file.

They weren't the funniest hours of my life, but it reduced the file by more than a half and lost less time trying to find what to fix or delete in the code later.

# One .less file to rule them all

A small decision sometimes becomes big. I decided to create a main.less file that will first import the _oldStyles.less file and everytime I refactored a particular section or functionality of the site I should erase them from that file and move it to a new one.

So, the main file looked like this at the beginning.

@import '_oldStyles.less';

After working a lot in the site and modularizing some parts of the site the main file looked like this:

@import '_reset.less';
@import '_general.less';
@import '_layout.less';
@import '_oldStyles.less';
@import '_header.less';
@import '_home.less';
@import '_footer.less';
@import '_singlePage.less';
@import '_categoryPage.less';
@import '_ads.less';

You can understand what most of the style sheets contain. In the general file I placed some variables like colors, spacing and mixins. In layout, the new grid system. I also deleted most of the browsers vendors and rely more on gulp-autoprefixer and the mixins in the _general.less file.

The final step would be to completely delete the _oldStyles.less file, something I wasn't able to do because my time ended. The good thing was that by doing this and deleting a lot of useless styles I reduced page loading time by fifty percent.

The thing is that, of course, no matter how much you like LESS the site needs a CSS one to load.

# Gulp to the rescue

In case you've never heard of it, Gulp is a build system that allows you to customize and automate tasks. I started using it to process and test scripts but it became a great tool to handle any file inside a project.

One of the reasons why I prefer it from Grunt is that is faster to set and easier to read, if this is the first time you ever read a gulpfile you will notice that you will be able to guess what's happening in most of the lines.

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');

gulp.task('styles', function () {
  return gulp
    .src('./src/less/main.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(minifyCss())
    .pipe(
      rename({
        suffix: '.min'
      })
    )
    .pipe(gulp.dest('./assets/styles/'));
});

Basically what we do is to require the modules we'll use, then we take the main.less file as a source, compile it to a CSS file, add prefixes, minify, rename it and place it in the destination folder. I will cover GulpJS in more depth in a future post.

That way, no matter the structure of the files this task will work. The only thing we need to do is to add a new import statement in the main file in case we added a new LESS file to our flow.

# Wrap-up

This is just an approach I took for this specific problem, I'm sure there's tons of ways to deal with this kind of crap. I hope you've found this useful.