28
YOUR TIME SAVING FRONT END WORKFLOW @kurenn

Your time saving front end workflow

Embed Size (px)

DESCRIPTION

A GruntJS set up to increase the happiness level on front end developers

Citation preview

Page 1: Your time saving front end workflow

YOUR TIME SAVING!FRONT END WORKFLOW

@kurenn

Page 2: Your time saving front end workflow

So you want to start a new website?

Page 3: Your time saving front end workflow

SASSHAML LESS

Bootstrap

BoilerplateDevices CSS

Coffeescript HTMLjQuery

Yeoman

Page 4: Your time saving front end workflow
Page 5: Your time saving front end workflow

We all know time is a key factor in staying productive

Page 6: Your time saving front end workflow

So you probably think you are really good at saving time by

Page 7: Your time saving front end workflow

Harvest App

Pomodoro

Rescue TimeBathroom time

Answer emails

Avoid long meetings

SelfControl

Page 8: Your time saving front end workflow

But we are hackers right?

Page 9: Your time saving front end workflow

We can automate repetitive tasks and !be more efficient

Page 10: Your time saving front end workflow

This is how you probably set up your environment today

Download libraries

Create the directories structure

Download templates

And the worse thing is you probably change your structure each time

Page 11: Your time saving front end workflow

Even with everything nicely set up it can take a couple of minutes to start and there

is still more…

Page 12: Your time saving front end workflow

Assets compilation

Watch for changes

LiveReload

Minify and concatenate

Deployment

Linting

Because we are all doing this right?

Page 13: Your time saving front end workflow
Page 14: Your time saving front end workflow

Helps you run repetitive tasks

Page 15: Your time saving front end workflow

Assets compilation

Watch for changes

LiveReload

Minify and concatenate

Deployment

Linting

Page 16: Your time saving front end workflow

A perfect alternative to !Rake/Make/Ant

Page 17: Your time saving front end workflow

https://github.com/andismith/grunt-responsive-images

Produces images at different sizes

Page 18: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-concat

Concatenate files

Page 19: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-watch

Run predefined tasks whenever watched file patterns are added, changed or deleted.

Page 20: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-coffee

Compile CoffeeScript files to JavaScript.

Page 21: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-clean

Clear files and folders.

Page 22: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-uglify

Minify files with UglifyJS

Page 23: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-compass

Compile Compass to CSS

Page 24: Your time saving front end workflow

https://github.com/gruntjs/grunt-contrib-livereload

Reload assets live in the browser

Page 25: Your time saving front end workflow

A super simple set-up

Page 26: Your time saving front end workflow
Page 27: Your time saving front end workflow
Page 28: Your time saving front end workflow

Always remember

If you are not automating your workflow,!you are probably working too hard