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

Slides meines Vortrages auf dem WordCamp Nürnberg 2016

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
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?
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