Your SlideShare is downloading. ×
0
YOUR TIME SAVING!
FRONT END WORKFLOW
@kurenn
So you want to start a new website?
SASS
HAML LESS
Bootstrap
Boilerplate
Devices CSS
Coffeescript HTML
jQuery
Yeoman
We all know time is a key factor in staying productive
So you probably think you are
really good at saving time by
Harvest App
Pomodoro
Rescue Time
Bathroom time
Answer emails
Avoid long meetings
SelfControl
But we are hackers right?
We can automate repetitive tasks and !
be more efficient
This is how you probably set up your
environment today
Download libraries
Create the directories structure
Download templa...
Even with everything nicely set up it can
take a couple of minutes to start and there
is still more…
Assets compilation
Watch for changes
LiveReload
Minify and concatenate
Deployment
Linting
Because we are all
doing this ri...
Helps you run repetitive tasks
Assets compilation
Watch for changes
LiveReload
Minify and concatenate
Deployment
Linting
A perfect alternative to !
Rake/Make/Ant
https://github.com/andismith/grunt-responsive-images
Produces images at different sizes
https://github.com/gruntjs/grunt-contrib-concat
Concatenate files
https://github.com/gruntjs/grunt-contrib-watch
Run predefined tasks whenever watched file patterns are
added, changed or del...
https://github.com/gruntjs/grunt-contrib-coffee
Compile CoffeeScript files to JavaScript.
https://github.com/gruntjs/grunt-contrib-clean
Clear files and folders.
https://github.com/gruntjs/grunt-contrib-uglify
Minify files with UglifyJS
https://github.com/gruntjs/grunt-contrib-compass
Compile Compass to CSS
https://github.com/gruntjs/grunt-contrib-livereload
Reload assets live in the browser
A super simple set-up
Always remember
If you are not automating your workflow,!
you are probably working too hard
Your time saving front end workflow
Your time saving front end workflow
Your time saving front end workflow
Your time saving front end workflow
Upcoming SlideShare
Loading in...5
×

Your time saving front end workflow

505

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
505
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×