Using gulp uncss with twig

August 11, 2014

I'm using Twig to run my personal site, and then using Gulp to compress the CSS to new levels. As part of that, I want to use uncss to really kill off as much CSS as I can.

I couldn't find anywhere on the internet where someone had solved this, so I've managed to work it out myself. Somehow.

I'm not using Gulp to compile the SCSS to CSS, as currently gulp-compass isn't very reliable (and slow). If anyone's solved that problem, let me know.

Uncss runs through your site and determines what CSS you're not using - and gulp-uncss allows for that in gulp. However, as far as I can tell, the gulp version doesn't take URLs, only files or direct HTML input - which means Twig is out, as a typical twig site is made up of several template files.

However, using my limited knowledge of node solved the issue. Using fs (filesystem) and request, I go to the URL of the site (in this case, my local dev site) and download it as a HTML file, which uncss can then scrape.

To top it off, I then combine the media queries and minify the CSS, and then rename it to style.min.css.

Of course, this only really works for a one-page site, and generally uncss only works for a one-pager unless you've got a bulletproof styleguide page. I figured this might help someone.

Thoughts? Improvements? I'm sure you got 'em. Tweet me at @jonginn.

UPDATE:
The author of gulp-uncss got in touch to let me know that you can now pass URLs in an array to the html item in the uncss. So send it ['http://google.com', 'http://inbox.google.com'] etc.