Sage & UnCSS

sage
2

I’ve made some progress on this but I’m still becoming familiar with the Gulp build process myself. This actually works now but is a little rough around the edges and has a few caveats:

  1. I’m using the latest Sage 8.3.0
  2. Install necessary gulp modules using this cmd: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulp_module_installation
  3. Add JSON sitemap code to your extras.php: https://gist.github.com/CFXd/e801388de55a9915e58f#file-sitemap-php
  4. Copy this into your gulpfile.js: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulpfile-js
  5. Run gulp --production once
  6. Uncomment the above gulpfile.js lines 105-109
  7. Run gulp --production again

I tested the above on a brand new installation and it worked like a charm, dropped my CSS from ~25kb down to ~2.5kb. Some caveats:

  1. It only works when running gulp --production task (as it should), however the sitemap.json gets generated every time you run a gulp task, even without production task specified. I’m not 1337 enough with gulp yet to get that sitemap only generating in production task.
  2. Obviously it would be nice if you didn’t have to start with a commented gulpfile.js section and then uncomment, but without that gulp spits out an error because sitemap.json doesn’t exist at first and it needs to be run once for it to be created. Again not 1337 enough to solve this one.
  3. Would be even better if instead of generating a sitemap.json file gulp would just fetch the JSON sitemap as a stream and use that.

Any improvements and help with the caveats above would be awesome. I’d love to get an updated blog post out of this and will certainly credit anyone who wants to pitch in.

View a diff of the original gulpfile.js right here

Enjoy and thanks for feedback & suggestions!

6 Likes