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
   

   View Slide

2. Heiko Mamerow
   ●
   Frontend Entwickler
   ●
   Individuelle Themes
   ●
   WordPress Genie$er
   

   View Slide

3. ES IST NICHT EINFACH!!!
   

   View Slide

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

   View Slide

5. Lass Deinen Computer die
   langweiligen Sachen machen!
   

   View Slide

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
   

   View Slide

7. Die langweiligen Sachen
   Wiederholung
   Zeitaufwand
   Fehlerquelle
   

   View Slide

8. View Slide

9. Automatisierung => Task Runner
   

   View Slide

10. Task Runner
    „Automation, performing repetitive tasks like
    minification, compilation, unit testing and linting.“
    Quelle: Grunt
    

    View Slide

11. Taskrunner
    

    View Slide

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

    View Slide

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

    View Slide

14. package.json
    

    View Slide

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

    View Slide

16. Packages: autoprefixer, postcss-cli
    

    View Slide

17. scripts / tasks
    

    View Slide

18. Lets try… ;-)
    

    View Slide

19. Fragen?
    

    View Slide

20. View Slide

21. Vielen Dank! :-)
    

    View Slide

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
    

    View Slide