I want to share with you some useful tools that have helped me speed up and optimize my frontend workflow. A tool that combines all the necessary and nice-to-have tasks all together, and have the power to customize them at your will.
A couple of years ago I was introduced to a fantastic application called CodeKit. It brought all the major web development compilers/preprocessors (JS, SCSS, LESS etc.) together under one roof.
It also came with proprietary templating language called “kit”. Kit is an simple way of “scripting” together HTML fragments without the need of a heavy backend.
I've been using CodeKit and the Kit language for a couple of years now. I had a nice workflow going with it which helped me speed up my rapid prototyping in a major way.
Then last year something new began to surface in the web development world... grunt.js
At first the idea of relying on a command line tool for front end development was a little daunting, yet after exploring the world of add-on grunt tasks, I was hooked.
I was able to find tasks for grunt.js to first recreate my CodeKit workflow, and then take it to the next level by customizing everything!
Each task has options for changing the behavior of the task. For instance, changing the web server port number, or choosing to keep comments during minification.
I want to quickly run through all the tasks I have been able to pull together.
By running one command...
> grunt connect
...I have a local web server running with full LiveReload support!
By running grunt without a command...
...I run the default workflow, which does so much!
- Watches all development files for changes and runs the associated task
The CSS path:
- LESS compilation
- SCSS compilation
- Combines the two css outputs
- Combines duplicate media queries
- Autoprefixes output
- Minifies output
- Blesses output
The HTML path:
- Compiles the *.kit to *.HTML
The JS path:
Combines *.js files
- Minifies output
Lets dive a little deeper on some of these things:
The connect task creates a local web server which includes LiveReload support. This means that when one of our compiled files is updated, our browser is automatically refreshes.
LESS + SCSS compilation
grunt-contrib-sass + grunt-contrib-less
By incorporating both SCSS and LESS in the workflow, I am allowed to utilising popular third party plugins that are written in either language. This removes the need to strip out useful variables or modular designs elements of any plugins. Both are compiled and and eventually combined into a single CSS file.
This task combines the LESS and SCSS output files.
Combining Media Queries
This task automagically finds all duplicate media queries and replaces them with one media query for each breakpoint. This is important for modular mobile-first designs which repeat the same media query potentially thousands of times in a large project with hundreds of modules.
This task Automagically prefixes all CSS with the vendor specific prefixes, and even removes the ones we don’t even need anymore (like border-radius).
This task strips out comments and compresses the CSS.
This task automagically splits the CSS into multiple files if there are more than 4096 selectors. This is a work around for a silent killer bug in IE9 which ignores all CSS after that specific amount. Avoid hours of troubleshooting for odd IE9 issues by blessing your CSS!
The Kit Language
The kit language works with simple HTML-style comments to allow both variables and fragment includes in basic HTML files.
A quick example
<!-- $pageName Home -->
<!-- @import "../base/head.kit" -->
<!-- @import "../modules/header.kit" -->
<!-- @import "../modules/footer.kit" -->
<!-- @import "../base/foot.kit" -->
<link rel="stylesheet" href="../css/main-blessed.css" />