blog

Front-end development workflow with grunt

by Stephen Rose
12 Nov 2014
5 min read
Share this article:
Front-end development workflow with grunt

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

So what is grunt.js? it is a JavaScript task-runner written in node.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...

> grunt

...I run the default workflow, which does so much!

  1. Watches all development files for changes and runs the associated task

The CSS path:

  1. LESS compilation
  2. SCSS compilation
  3. Combines the two css outputs
  4. Combines duplicate media queries
  5. Autoprefixes output
  6. Minifies output
  7. Blesses output

The HTML path:

  1. Compiles the *.kit to *.HTML

The JS path:

  1. Combines *.js files

  2. Minifies output

Lets dive a little deeper on some of these things:

Connect

grunt-contrib-connect

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.

Concatenation

grunt-contrib-concat

This task combines the LESS and SCSS output files.

Combining Media Queries

grunt-combine-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.

Autoprefixer

grunt-autoprefixer

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).

Minification

grunt-contrib-cssmin

This task strips out comments and compresses the CSS.

Bless

grunt-bless

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

grunt-codekit

The kit language works with simple HTML-style comments to allow both variables and fragment includes in basic HTML files.

A quick example

views\index.kit

<!-- $pageName Home -->
<!-- @import "../base/head.kit" -->
<!-- @import "../modules/header.kit" -->
<!-- @import "../modules/footer.kit" -->
<!-- @import "../base/foot.kit" -->

base\head.kit

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title><!--$pageName--></title>
       <link rel="stylesheet" href="../css/main-blessed.css" />
   </head>
   <body>

base\foot.kit

       <script src="../js/combined.js"></script>
   </body>
</html>
Share this article: