About a year ago I learned about Yeoman and Grunt, two tools that have since changed my web development workflow drastically. I had just started development on Webworke.rs, which like this site is built with Jekyll. I decided to look into a generator for Yeoman and lo and behold I discovered Generator-jekyllrb, a fantastic project by @robwierzbowski.
Per the project’s description:
Generator-jekyllrb wraps the Jekyll static site generator in a Yeoman development workflow. Scaffold your site with Yo, manage front end packages with Bower, and automate development and build tasks with Grunt.
Generator-jekyllrb is ideal for developing performant static sites and prototyping dynamic sites and apps (especially if the final version uses Yeoman too). It’s also a great introduction to Yeoman if you’re not familiar with JavaScript MV* frameworks.
Why It’s Awesome
My favorite part to pairing Jekyll with Grunt is that I get the benefits of using both tools, without being locked into their respective disadvantages. I’m able to use Jekyll to write, organize, and build my content into static files, but I don’t let Jekyll handle any of my frontend assets, which is where Grunt comes in.
Sure Jekyll can compile Sass and CoffeeScript, but otherwise I need a plugin, a Ruby gem, and/or a Rakefile to automate my build tasks. All of this is much better done by Grunt via its large ecosystem of plugins. Let Jekyll do the content and templating, but use Grunt for all the build tasks.
Notable Grunt Plugins
What follows are the most interesting Grunt plugins that I use to build this site:
Development Tools
Vendor Prefixes for CSS
JavaScript Code Quality
Minification, Optimization, and Uglification
- grunt-contrib-cssmin
- grunt-contrib-htmlmin
- grunt-contrib-imagemin
- grunt-contrib-uglify
- grunt-svgmin
- grunt-xmlmin
Performance
Deployment to GitHub Pages
Examples
For those who are interested, see my Gruntfile.js and package.json.