victoria web design information architecture (IA)


victoria web design


Drupal CMS Web Development


victoria website Maintenance


Victoria Web Development with LibSass, Node.js, Gulp

Our Drupal Web Development Tools

drupal omega victoria web developmentAt Pure Web Media, we are always looking to balance forward thinking with practicality in our approach to coding within web development. Traditionally, we have been fans of the Omega subtheme framework since version 3, going back many years, but we're particularly fond of version 4 in combination with the "bleeding edge" default starterkit. At the time of this writing, Drupal 8 is capable for small projects but currently not nearly as mature in terms of advanced capabilities than Drupal 7 due to the thousands of modules available for it. This article gives an overview of our use of LibSass for Sass compilation in combination with the task-runner, Gulp.

LibSass instead of Ruby

drupal libsass victoria web designWe've been long time users of Sass and Compass, which get installed as Ruby gems. Ruby Sass and LibSass are similar with the main differences being the implementation and compiling speed. LibSass is a library, a C/C++ port of the Sass engine which was built to bring Sass to many other languages instead of just Ruby. LibSass allows us to compile our stylesheets without having to depend on Ruby, which is a good thing because managing different version of Ruby can be a pain and become quite slow. LibSass was the answer for developers who want something faster to compile Sass. 

The Mac OS and Linux come with Ruby already installed. It's typically painful to get things going on Windows, but eventually it too makes it to the Ruby party. If you have been developing with these tools, you're probably familiar with RVM (Ruby Version Manager) which will allow you to switch between different Ruby versions for various projects. However, as we have been paying attention to LibSass and after using it on a few projects, we find it much faster and involves less management than Ruby. Closely following development around LibSass, it appears to us that LibSass will overtake Ruby Sass in terms of overall performance, and so for the time being, we are sticking with those tools especially since the Omega subtheme with the "bleeding edge" starterkit is designed to take advantage of them.

Task Runners: Gulp, Grunt with Node.js

drupal gulp victoria web developmentBoth Grunt and Gulp are known as 'Javascript task runners' and are used widely within web development. What these tools can do is allow you to fire off some common tasks you want to perform when you save a file. For example, we use Gulp to incorporate tasks such as browser-sync to refresh our pages in all open browswers automatically after saving our Sass files; node-sass-globbing accounts for the SMACSS structure of our stylesheets; gulp-shell allows us to incorporate drush commands into our tasks to clear the cache before the browsers refresh. The list goes on and you can tailor these tasks for your own purposes. We were just getting cozy with Grunt when along came Gulp which showed enough promise to get our attention and from a few projects we've tried with it, Gulp has lived up to expectations.

Both task runners use Node.js (a JavaScript runtime built on Chrome's V8 JavaScript engine) and both work effectively well, so I would say for for now whichever task-runner you choose is largely arbitrary, but as mentioned, we're always looking ahead. Daniel Pataki has written an excellent article on the comparison of these two task runners, so check out his article to learn more about the two technologies from a more in-depth perspective. Node.js comes with NPM, which handles all your Node packages, like Gulp and Browsersync (but note that Windows users need NPM3 because apparently Windows can't deal with the multilevel nesting structure of node_module dependencies).

What Should You Use?

The tools above are just one combination of many tools that are out there for web development. We are not advocating that you should use these tools specifically but in our experience, the use of LibSass and Gulp has drastically sped up our development time. Of course we are acknowledging that you have to put the time in to learn these tools first but realistically it took us about two days of solid reading and experimenting to learn these approaches. We feel it's a worthwhile effort which allows us to both stay up to date with cutting edge technologies and ultimately become more efficient at our work because in the end, we all want to work smarter and have more time for things like getting outside with your friends for that bbq or the road trip, or that glass of wine on the patio... Stay tuned for future articles on how to setup your environment with these tools.