Creating a Development Workflow with Task Runners

by Matthew Casserly

Bill Gates once said, “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.”

In the programming world there are a myriad of similar quotes, all suggesting that one should work smart, not hard. Putting this theory into practice as a front-end developer in today’s environment entails automating repetitive tasks and leaning on one’s machine to perform the hard work. As an example, let’s look at a typical user interacting with a website:

When a user visits a specific URL, the web browser is tasked with locating the corresponding HTML, CSS, JavaScript, fonts, and image files. Once found, the browser must load these resources and render them on the page. With a slow internet connection, on mobile, or on a 3G network, this may take a noticeable amount of time. Providing these resources at a greater speed will greatly enhance the experience for the user.

One great way to achieve this is by limiting the number of resources that the user needs to fetch before they can begin interacting with the content. This can be achieved by providing minified and concatenated CSS and JavaScript files, optimizing images to reduce file size, and limiting the number of fonts that are loaded on a page.  Less is more in this scenario.

What is great for the end user, however, is not ideal for the development process. As a developer, having a clean, well organized file structure with a clear separation of assets (images/JavaScript/CSS) is far more productive.

By utilizing a task runner during the development process, a developer is able to work in a well structured file system and leverage modern tools like Sass and Livereload, while still outputting the appropriate minified and compiled source files without any additional effort.

Our Task Kit

At Fresh Tilled Soil we recently polled our developers to see what tasks they relied on most on a daily basis. We then put together a base task runner that can be pulled into a new or existing project to automate those tasks for them.

The base tasks include:

  • Livereload
  • CSS autoprefixer
  • Sass compiler
  • CSS / JS minification
  • JS concatenation
  • Image minification
  • JavaScript error notification

If you are up to date on current task runners, you will note that there are actually two extremely popular options: Grunt ( and Gulp ( Both work in a similar fashion, and we put together similar configurations for each:


About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design