$30 off During Our Annual Pro Sale. View Details »

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

Heiko Mamerow

April 18, 2016
Tweet

More Decks by Heiko Mamerow

Other Decks in Programming

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