James Cole front-end Developer

Goodbye Ruby, Hello Node.js Updated front-end dev workflow

Recently at Zivtech we started migrating our base theme for Drupal called Bearskin over to a gulp-based CSS compiling system. Up until now we had been using the original Sass, written in Ruby, but lately it’s been feeling a bit slow.

The sluggishness of Ruby’s Sass really started showing with very large projects, and became a nuissance when coupled with LiveReload. Let’s face it, when you make a single CSS change, waiting for even a couple seconds can feel like an eternity.

The first step to speed things up was to get rid of some mixins that we no longer needed. The low-hanging fruit was Compass. Compass is an amazing framework that we had come to rely on, but now that browsers have largely caught up with each other, there isn’t been much need for Compass’s vendor prefixing mixins. Instead, when we do need it we can use an Autoprefixer or write our own mixin. Easy enough!

After getting Compass and some other Ruby gems out of the way we saw some improvement, but not enough to make us happy! So the search continued…

We decided as a group to move over to Gulp and try to get rid of Ruby altogether.

Why Gulp? Gulp is all node-based, so we were able to use gulp-sass for compiling our CSS. That gulp plugin is just a thin-wrapper around libsass, a C/C++ implementation that is wicked fast, even for large projects.

Some quick Google searches lead me to benchmarks performed by The Opinionated Programmer that compare several CSS preprocessors. Long story short, libsass is about 25 times faster than Ruby on a first run, and after Ruby has a sass-cache available libsass is still about 12 times faster. That’s a massive improvement!

Cross-posted