Task Runners

Task runners are programmable scripts that automate development processes

I want to compare how much improvement task automation can have on front-end development tasks I do routinely.

The goal of my routine tasks are:

1. Cross-device support
   • Bootstrap
   • jQuery
   • Plugins etc.
2. Faster page load
   • Minify HTML, CSS, JavaScript
   • Manage page size
3. Multiple pages with consistent features e.g. navigation
4. Testing
   • BrowserStack
   • Litmus

Task breakdown

Let’s break these down into goals into the tasks that I must do.

Cross-device and feature support

1. Setup project directory and sub-directories
2. Find the download URL for the file version
3. Add the file to a project
4. Add file dependencies
5. To update or change any file version repeat steps 2 – 4

Faster page load

1. Compress HTML, CSS, JavaScript, images and other assets
2. Minimize file downloads by concatenating files i.e. send all CSS in one CSS file

Multiple pages

1. Use templates to write features once and include it where it is needed

Testing

Browserstack (page testing)

1. Upload images and files to an external FTP location
2. Access URL with Browserstack

Litmus (email testing)

1. Inline-CSS
2. Upload images to an external FTP location
3. Update images with FTP location URL
4. Generate email
5. Send to Litmus

The case for automation

The benefits of automating these steps are:

1. Use reliable automation to achieve consistent quality workflows
2. Workflows can be shared and customised
3. Benefit from the works of others

So I can accomplish the same tasks using task runners by:

1. Scaffold with Yeoman.io
2. Build with Grunt or Gulp
3. Manage dependencies with Bower

Steps

Setup

1. Install Yeoman.io (once)
2. Use Yeoman template appropriate to the project
3. Use Bower to manage project dependencies

For faster page loads

1. Use SASS or LESS for CSS so files can be imported into one main file
2. Install gulp
3. Define gulp task
4. Run gulp task

Templates

1. Run gulp task

Testing

1. Run gulp task, especially for unit and end-to-end tests

Case study: Email testing

The process for testing emails is a well-defined business process and so allows us to make some basic, time-based comparisons.

Comparison

These are the approximate time comparisons for manual vs. automated approaches in seconds

Upload images to a publicly accessible location

• Manual: 60 seconds
• Automated: 20 seconds

Replace image links in email

• Manual: 20 seconds – Automated: 0

Generate an email and send it to Litmus

• Manual: 210 seconds – Automated: 0

Total time

• Manual: 290 seconds
• Automated: 18 seconds

An automated process shows a 16x time improvement and so can be scaled to include additional requirements.

Examples of task runners

• Static site generators – Middleman, Harp, Hugo
• HTML5 web apps – Ionic, Reapp, Angular
• Online web applications scaffolding – Yeoman.io, Play framework

Bibliography

• Yeoman.io
• Gulp
• Grunt
• Ionic
• Reapp
• Static site generators

Next steps

Automating language translations