WHEN JAG ❤ GRUNT

July 2013 I started a new contract

They used LESS and CoffeeScript

compiled using Eclipse

or was it Maven

IT DIDN't WORK ON MY MACHINE

I needed a hero!

IT'S THE 'JAVASCRIPT TASK RUNNER'

• Windows, Linux, and OSX
• Install Node.js
• Install the Grunt CLI (globally)

e.g. npm install -g grunt-cli

It's all about tasks!

grunt-tasks-demo

So how do I create a plugin?

• Use the grunt-init-gruntplugin template
• Write your task!
• Write some tests! (examples come with the template)
• My plugin grunt-indexer

Lets build a responsive app mobile first with grunt

• grunt-responsive-app
• Each step is a commit!

Responsive Apps must Perform!

#PerfMatters

• +100ms = -1% Amazon Sales
• +500ms = -20% Google traffic & ad revenues
• Facebook delayed scroll performance and saw 1% drop in engagement
• +160k on a page = +12% Etsy bounce rate on mobile

#PerfMatters

• Users expect a site to load in 2 seconds
• After 3 seconds 40% will leave
• 44% tell a friend about their poor experience
• Over 56% shoppers go to competitor if site is slow

Still not convinced? Search for #perfmatters

#PerfMatters

Grunt to the rescue

Images are a nightmare and the biggest web perf killer!

• Compression
• Image sizes
• Sprite creation
• Retina displays

The problem - icons

• A browser can/will only make X number of requests for a domain
• So if the limit is five and you have six images, one will be blocked
• Could solve using something like domain sharding
• Or...

grunt-spritesmith

• grunt-spritesmith
• Single request for all images
• Makes creating and adding sprites easy
• Retina displays can make things difficult

grunt-image-embed

• grunt-image-embed
• Converts images to base-64 encoded data URI strings
• Zero images so no requests!
• Gets around mobile network compression
• Performance not always what you expect

grunticon

• grunticon
• SVG images with fallbacks for PNG sprites, then individual images
• Use JavaScript to decide what resource to use
• Retina displays ❤ SVG
• Could cause FOUC

The problem - IMAGES

• Downloading an image that is bigger than the screen is waste!
• Good times - the problem has been identified
• picture element and/or srcset
• Bad times - no native solution yet

grunt-responsive-images

• grunt-responsive-images
• Re-sizes and names images for you!

The perfect picture

• srcset-polyfill
• picturefill
• BBC Imager.js

Compression

• grunt-contrib-imagemin
• grunt-smushit
• Read How Optimized Are Your Images - Smashing Magazine

Think Above the fold!

• What does the user need to see?
• Lazy load images?
• Load scripts when required? E.g. Google maps

Only you know YOUR content!

• Use UX research
• Use analytics

Don't guess!

Grunt can give you performance stats after every build!

Grunt Tips

Grunt Optimisation

• grunt-concurrent
• grunt-newer
• Load plugin when required!

Grunt Organisation

• Split Gruntfile into modules
• Use config files
• Organise config alphabetically
• Use JavaScript

What about Yeoman etc?

• Break it apart
• Take what you need
• Build your own!

You MUST remain in control!

(because Grunt is so 2013)

WHAT'S DIFFERENT

Streams - no more temp files between tasks!

Code not config

Watch built in

Concurrent by default

grunt-gulp-comparison

IS GRUNT GOING TO DIE?

No

WHICH IS FASTER?

Gulp

But difference is not 'significant'

What are my options?

• gulp-grunt - call Grunt tasks using gulp
• vinyl use streams in Grunt
• Grunt 0.next - will use streams!

Gulp plugin quality?

• Gulp plug-ins are designed to do one thing only
• Unlike grunt-contrib-cssmin which minfies and combines!
• How many will actually use streams? e.g. gulp plugins are supposed to work on file streams and shouldn't touch fs