Please Note: I no longer use source maps with Sass or use Rake to manage development environments. The following code may still be helpful for some folks, even though I’ve moved on to using Grunt to compile my Sass.
Why Compress Assets?
The obvious benefit to minifying text and optimizing images is that it reduces filesize, so the assets load faster. This is the low hanging fruit of front end optimization and usually quite impactful on performance, despite being so easy to do.
My Set Up
To use Reduce I added it to my site’s project with Bundler so that I may then invoke it in my Rake task to build for production. A benefit to having separate environments for development and production is that I can delay all optimization to my production build, which saves considerable time during development.
I previously tried several Jekyll plugins to manage this, but didn’t like the delay between saving a file and then waiting for Jekyll to rebuild. Invariably, the bottleneck was the file compression, especially in regards to the minification of the HTML, which is perhaps due to the sheer quantity of files involved.
The task I invoke to minify the assets is courtesy of Emanuele Bardelli, who added the HTML compression functionality to Reduce. See his rake task, which I’ve only superficially modified:
How easy is that? With a simple
rake build:pro command I’m able to build my site with production ready assets, which I then commit and deploy to GitHub.