Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vangelis Dimitriadis - Modern frontend workflows - WordCamp Athens 2016

Vangelis Dimitriadis - Modern frontend workflows - WordCamp Athens 2016

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

November 19, 2016
Tweet

Transcript

  1. LETS TALK ABOUT WORKFLOWS Μοντέρνα ροή εργασίας & εργαλεία

  2. Vangelis Dimitriadis @vangelis183 LETS TALK ABOUT WORKFLOWS

  3. PROGRAMMERS ARE F***ING LAZY Swizec Teller LETS TALK ABOUT WORKFLOWS

  4. Μια ροή εργασίας αποτελείται από μια σειρά συνδεδεμένων βημάτων, προκειμένου

    να ολοκληρωθεί μια εργασία. Wikipedia LETS TALK ABOUT WORKFLOWS
  5. Ποιά εργαλεία χρησιμοποιούμε σήμερα; LETS TALK ABOUT WORKFLOWS

  6. None
  7. Τα εργαλεία μας εξελίσσονται. Εμείς; Ο τρόπος δουλειάς μας; LETS

    TALK ABOUT WORKFLOWS
  8. Η επένδυση σε χρόνο/χρήμα σε μια ροή εργασίας θα πρέπει

    να μας επιστραφεί πολλαπλάσια. LETS TALK ABOUT WORKFLOWS
  9. Ποιά εργαλεία υπάρχουν; LETS TALK ABOUT WORKFLOWS

  10. https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.gt4cz03pe

  11. Λεπτή γραμμή μεταξύ χρήσης για χάρη της χρήσης και χρησιμότητας.

    LETS TALK ABOUT WORKFLOWS
  12. Αυτοματοποίηση LETS TALK ABOUT WORKFLOWS

  13. Grunt Gulp Broccoli

  14. Πού χρησιμέυουν; LETS TALK ABOUT WORKFLOWS Compile Convert Tasks automation

    Deploy
  15. Ποιό χρησιμοποιούμε; LETS TALK ABOUT WORKFLOWS Αυτό που μας εξυπηρετεί!

  16. CSS Preprocessors LETS TALK ABOUT WORKFLOWS

  17. LESS SASS

  18. Πού χρησιμέυουν; LETS TALK ABOUT WORKFLOWS variables nesting mixins operators

  19. None
  20. None
  21. Livereload / Browsersync LETS TALK ABOUT WORKFLOWS

  22. None
  23. Πού χρησιμέυει; LETS TALK ABOUT WORKFLOWS Refresh after changes made

    Server via local IP Click sync on multiple devices
  24. UglifyJS LETS TALK ABOUT WORKFLOWS

  25. None
  26. Πού χρησιμέυει; LETS TALK ABOUT WORKFLOWS minify sources performance

  27. Από 1,7 MB σε 331KB

  28. Sourcemaps LETS TALK ABOUT WORKFLOWS

  29. Πού χρησιμέυει; LETS TALK ABOUT WORKFLOWS locate Error minified sources

    „Αντιβιωτικό“ για debugging
  30. None
  31. imageoptim / imagemin LETS TALK ABOUT WORKFLOWS

  32. Και πως συνδέονται όλα αυτά; LETS TALK ABOUT WORKFLOWS

  33. https://nodejs.org/en/

  34. package.json

  35. npm install LETS TALK ABOUT WORKFLOWS

  36. Gruntfile.js

  37. Gruntfile.js

  38. Gruntfile.js

  39. None
  40. None
  41. last but not least … LETS TALK ABOUT WORKFLOWS

  42. Version control LETS TALK ABOUT WORKFLOWS

  43. None
  44. None
  45. https://bitbucket.org/vangelis/wcath2016 LETS TALK ABOUT WORKFLOWS