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

Transcript

1. 1.

   Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend

   Coden #wcnbg XVI-IV-MMXVI @heikomamerow
2. 2.

   Heiko Mamerow • Frontend Entwickler • Individuelle Themes • WordPress

   Genie$er
3. 3.

   ES IST NICHT EINFACH!!!

4. 4.

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

5. 5.

   Lass Deinen Computer die langweiligen Sachen machen!

6. 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. 7.

   Die langweiligen Sachen Wiederholung Zeitaufwand Fehlerquelle

8. 8.

   None
9. 9.

   Automatisierung => Task Runner

10. 10.

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

    testing and linting.“ Quelle: Grunt
11. 11.

    Taskrunner

12. 12.

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

13. 13.

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

    scripts V. Tasks
14. 14.

    package.json

15. 15.

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

    ]
16. 16.

    Packages: autoprefixer, postcss-cli

17. 17.

    scripts / tasks

18. 18.

    Lets try… ;-)

19. 19.

    Fragen?

20. 20.

    None
21. 21.

    Vielen Dank! :-)

22. 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