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

1. YOUR TIME SAVING!
FRONT END WORKFLOW
@kurenn

2. So you want to start a new website?

3. SASS
HAML LESS
Bootstrap
Boilerplate
Devices CSS
Coffeescript HTML
jQuery
Yeoman

5. We all know time is a key factor in staying productive

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

7. Harvest App
Pomodoro
Rescue Time
Bathroom time
Answer emails
Avoid long meetings
SelfControl

8. But we are hackers right?

9. We can automate repetitive tasks and !
be more efficient

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

11. Even with everything nicely set up it can
take a couple of minutes to start and there
is still more…

12. Assets compilation
Watch for changes
LiveReload
Minify and concatenate
Deployment
Linting
Because we are all
doing this right?

14. Helps you run repetitive tasks

15. Assets compilation
Watch for changes
LiveReload
Minify and concatenate
Deployment
Linting

16. A perfect alternative to !
Rake/Make/Ant

17. https://github.com/andismith/grunt-responsive-images
Produces images at different sizes

18. https://github.com/gruntjs/grunt-contrib-concat
Concatenate files

19. https://github.com/gruntjs/grunt-contrib-watch
Run predefined tasks whenever watched file patterns are
added, changed or deleted.

20. https://github.com/gruntjs/grunt-contrib-coffee
Compile CoffeeScript files to JavaScript.

21. https://github.com/gruntjs/grunt-contrib-clean
Clear files and folders.

22. https://github.com/gruntjs/grunt-contrib-uglify
Minify files with UglifyJS

23. https://github.com/gruntjs/grunt-contrib-compass
Compile Compass to CSS

24. https://github.com/gruntjs/grunt-contrib-livereload
Reload assets live in the browser

25. A super simple set-up

28. Always remember
If you are not automating your workflow,!
you are probably working too hard