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

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