Lore

3 Gulp plugins that make life as a developer easier

Over the past year, I’ve been relying on build systems to automate all of my repetitive tasks for front-end programming. Build systems are great because they take care of all the mundane tasks such as magnification, image optimization, compilation, etc. I’ve used middleman (a ruby gem), grunt.js (a node.js based project defined as a “Task Runner”), and the latest and greatest: gulp.js, defined as a streaming build system.

I’m a big fan of gulp, and was initially intrigued simply because its configuration file is much easier on the eyes. I later found that gulp is much quicker than grunt since it doesn’t rely on each task performing I/0 before executing the next. All gulp plugins use streams to read in data and output data. Everything is processed with the output of one stream piped into the input of another stream. This gives gulp a speed advantage since grunt’s I/O operations are expensive when compared to memory operations.

Since switching to gulp.js, I’ve found a couple plugins that’ve made my life easier.

1. Plumber

One disadvantage to gulp’s process, is that when a syntax error is found during execution of a gulp-watch task, it breaks the stream, and effectively stops watching your files. This is where plumber comes to the rescue. Plumber will listen for errors, output them to the console, and keep your tasks running.

2. PixRem

Since using build systems, I’ve often also utilized the Foundation css framework. Foundation comes with a scss utility function to convert pixel values to rems. For example, rem-calc(16px), would compile to 1rem. I was constantly writing this for a while until I came across the gulp-pixrem preprocessor. This plugin searches through your css, and adds rem values on top of all your pixel values. This beats the hell out of typing “rem-calc()” over and over again in your scss file.

3. Autoprefixer

Autoprefixer will parse css and add vendor prefixes to CSS rules using values from the http://caniuse.com/ website. This is helpful because you can specify which browsers to support, and autoprefixer will take care of the rest. Before discovering this, I was using Compass’s mixins, which were sometimes very syntactically inconsistent from the actually css declairation. Autoprefixer takes all the guesswork out, so I don’t have to constantly check Compass’s documentation making sure I have all of the parameters in the correct order. Since making this switch, I no longer have a huge need for compass, so I just stopped using it all together.