Learn­ing New Tools

Posted on: May 09, 2016

Last month, I was think­ing about all the Craft sites I want­ed to build, and was becom­ing exhaust­ed always build­ing the same basic sys­tem, over and over. I got the wild idea to ask Andrew Welch on the Craft Slack chan­nel how he would rec­om­mend pulling files from a sta­t­ic loca­tion, per­haps using an Alfred workflow?

Andrew sim­ply replied with a link to a repos­i­to­ry of his, at the time self-named for his com­pa­ny, generator-nystudio107, but would lat­er be renamed generator-craftinstall. I saw that it was a Yeo­man gen­er­a­tor, which I knew was sup­posed to help me save time build­ing out a project, but I had no idea what it involved, or how easy it could make it.

After fol­low­ing Andrew’s thor­ough instruc­tions, I saw the poten­tial this set­up had. Using the Craft Install gen­er­a­tor, I also got a chance to dive into Gulp and npm. These tools have helped me cre­ate a great envi­ron­ment that runs light­ning fast.

What about CodeKit? 

As I men­tioned, I’m not unfa­mil­iar with pre­proces­sors; they’ve been a sta­ple of my setups since I start­ed using CodeK­it four years ago. But late­ly, I’ve been run­ning up against slow pro­cess­ing times, as well as the desire to bring Bow­er com­po­nents into a build with­out hav­ing the source live inside the web root. Hav­ing mul­ti­ple projects added to the appli­ca­tion can cause some unde­sir­able slow­down; the pro­posed solu­tion is to add and remove projects as one needs them, but this seemed like an unnec­es­sary step where a tog­gle would suffice.

Enter gulp

As a side-effect of learn­ing how to use npm and yo com­mands, I start­ed to pick up gulp. Gulp is a fan­tas­tic automa­tion tool as well that helps me run tasks while build­ing my site. Where Yeo­man lays the foun­da­tion, gulp helps me by han­dling process­es I nor­mal­ly reserved for CodeK­it, only much, much faster. There’s a mil­lion and one arti­cles on how every­one uses their gulp set­up to make automa­tion a breeze, so I’ll quick­ly go over what sets this (and Grunt) apart from CodeK­it for me.



Using gulp to process my Sass files has seen a huge increase in speed. Even when CodeK­it is also set to use the lib­sass com­pil­er, gulp seems to scream past CodeK­it since it doesn’t have any­thing weigh­ing it down; you aren’t try­ing to watch or process any­thing but the code in front of you.


PostC­SS by itself doesn’t do much. Its pow­er lies in how it uses var­i­ous oth­er JavaScript plu­g­ins to process and mas­sage CSS files, list­ing, orga­niz­ing and com­press­ing along the way. Even if you aren’t using gulp-sass as a pre­proces­sor, this is an absolute­ly essen­tial plu­g­in for two reasons:

  1. mq-pack­er
    While it nor­mal­ly isn’t a cause for con­cern, mul­ti­ple iden­ti­cal media queries can be dif­fi­cult for you or your team mem­bers to parse when star­ing at your styles. This PostC­SS plu­g­in will gath­er all iden­ti­cal media queries and place them togeth­er, clean­ing up the total num­ber of queries and mak­ing it far more log­i­cal to understand.

  2. per­fec­tion­ist
    I love beau­ti­ful code, as one might guess from the pre­vi­ous plu­g­in list­ed. But gath­er­ing the media queries isn’t the only way for code to look nice. Per­fec­tion­ist helps orga­nize your out­put CSS in a way that is instant­ly read­able to any user, and even adjusts visu­al cas­cad­ing of ven­dor pre­fix­es, which is a use­ful tool when you are using auto­pre­fix­er.


If it weren’t for this plu­g­in, I don’t think I could have found the strength to drop CodeK­it. livere­load reloads my brows­er html/​js/​css when it detects spe­cif­ic files being updat­ed. The speed this occurs and its over­all trans­paren­cy are amazing.


This one is more for orga­ni­za­tion before I kick off automa­tion than any­thing else. Since there’s a large num­ber of plu­g­ins for gulp, specif­i­cal­ly, it could get tedious writ­ing out:

var gulp            = require('gulp');
var cache           = require('gulp-cache');
var sass            = require('gulp-sass');
var postcss         = require('gulp-postcss');
var livereload      = require('gulp-livereload');
var watch           = require('gulp-watch');
var concat          = require('gulp-concat');
var debug           = require('gulp-debug');

So instead we do the fol­low­ing and call only the gulp plu­g­in and then run gulp-load-plugins to bun­dle every­thing up under a plugins variable:

var gulp            = require('gulp');

var plugins = require("gulp-load-plugins")({
	pattern: ['gulp-*', 'gulp.*'],
	replaceString: /\bgulp[\-.]/


This thing is fast. Like, real­ly fast. On aver­age, most of my changes take ~ 150ms to recom­pile and reload. Com­pared to CodeK­it often not even respond­ing until the app was reloaded, it real­ly is no con­test for me. I feel like I can accom­plish more when the results are instantaneous.

One Less App (to look at) 

I can’t stand hav­ing extra icons in my dock or my menubar. Hav­ing all of this run and live inside of a ter­mi­nal win­dow means I can SSH, I can run com­mands, etc., all under the sin­gle, tabbed win­dow. The reduc­tion in clut­ter is well worth it.

In Sum­ma­ry

I know that this is just the tip of the ice­berg, and there’s plen­ty I didn’t even touch on, but if there’s one take­away I would want any­one to have from this arti­cle, it’s this: go ahead and try that work­flow or plu­g­in or app you’ve been want­i­ng to. You def­i­nite­ly will end up spend­ing extra time learn­ing how to incor­po­rate it into your work­flow. But once you have it run­ning, and things are pre­dictable and smooth, you’ll be sur­prised at how easy it is to focus on the parts of the project that real­ly matter.