Your time saving front end workflow

973 views

Published on

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

Published in: Software, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
973
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Your time saving front end workflow

  1. 1. YOUR TIME SAVING! FRONT END WORKFLOW @kurenn
  2. 2. So you want to start a new website?
  3. 3. SASS HAML LESS Bootstrap Boilerplate Devices CSS Coffeescript HTML jQuery Yeoman
  4. 4. We all know time is a key factor in staying productive
  5. 5. So you probably think you are really good at saving time by
  6. 6. Harvest App Pomodoro Rescue Time Bathroom time Answer emails Avoid long meetings SelfControl
  7. 7. But we are hackers right?
  8. 8. We can automate repetitive tasks and ! be more efficient
  9. 9. 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
  10. 10. Even with everything nicely set up it can take a couple of minutes to start and there is still more…
  11. 11. Assets compilation Watch for changes LiveReload Minify and concatenate Deployment Linting Because we are all doing this right?
  12. 12. Helps you run repetitive tasks
  13. 13. Assets compilation Watch for changes LiveReload Minify and concatenate Deployment Linting
  14. 14. A perfect alternative to ! Rake/Make/Ant
  15. 15. https://github.com/andismith/grunt-responsive-images Produces images at different sizes
  16. 16. https://github.com/gruntjs/grunt-contrib-concat Concatenate files
  17. 17. https://github.com/gruntjs/grunt-contrib-watch Run predefined tasks whenever watched file patterns are added, changed or deleted.
  18. 18. https://github.com/gruntjs/grunt-contrib-coffee Compile CoffeeScript files to JavaScript.
  19. 19. https://github.com/gruntjs/grunt-contrib-clean Clear files and folders.
  20. 20. https://github.com/gruntjs/grunt-contrib-uglify Minify files with UglifyJS
  21. 21. https://github.com/gruntjs/grunt-contrib-compass Compile Compass to CSS
  22. 22. https://github.com/gruntjs/grunt-contrib-livereload Reload assets live in the browser
  23. 23. A super simple set-up
  24. 24. Always remember If you are not automating your workflow,! you are probably working too hard

×