Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend Coden

Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend Coden

Slides meines Vortrages auf dem WordCamp Nürnberg 2016

29958f86da5d76e052520ccfc24dbde9?s=128

Heiko Mamerow

April 18, 2016
Tweet

Transcript

  1. Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend

    Coden #wcnbg XVI-IV-MMXVI @heikomamerow
  2. Heiko Mamerow • Frontend Entwickler • Individuelle Themes • WordPress

    Genie$er
  3. ES IST NICHT EINFACH!!!

  4. Übersicht I. Die langweiligen Sachen II. Automatisierung III.How To

  5. Lass Deinen Computer die langweiligen Sachen machen!

  6. Die langweiligen Sachen • Browser aktualsieren • Formatieren (beautify/uglify) •

    Präfixe • Linting/Testen • Deploy (Dev, Test, Client) • Zusammenfassen • Redundanz • Umrechnung (PX–EM–REM-%) • Preprozessoren • Bilder optimieren • CSS Sprites
  7. Die langweiligen Sachen Wiederholung Zeitaufwand Fehlerquelle

  8. None
  9. Automatisierung => Task Runner

  10. Task Runner „Automation, performing repetitive tasks like minification, compilation, unit

    testing and linting.“ Quelle: Grunt
  11. Taskrunner

  12. How To Linux https://github.com/nodesource/distributions Mac OS X, Windows https://nodejs.org/en/download/stable

  13. How To I. npm init II. package.json III. Package IV.

    scripts V. Tasks
  14. package.json

  15. Packages • https://www.npmjs.com • Installation: npm install --save-dev [ packagename

    ]
  16. Packages: autoprefixer, postcss-cli

  17. scripts / tasks

  18. Lets try… ;-)

  19. Fragen?

  20. None
  21. Vielen Dank! :-)

  22. Fernsehturm (Slide 2) Urheber: von Kazuyanagae (Eigenes Werk) [CC BY-SA

    4.0 ( http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons Bildnachweis