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

29958f86da5d76e052520ccfc24dbde9?s=47 Heiko Mamerow
April 18, 2016
Programming
0
100

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

Slides meines Vortrages auf dem WordCamp Nürnberg 2016

29958f86da5d76e052520ccfc24dbde9?s=128

Heiko Mamerow

April 18, 2016
Tweet

More Decks by Heiko Mamerow

See All by Heiko Mamerow
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
0
89
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
0
50
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
1
750
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
1
130

Other Decks in Programming

See All in Programming
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
0
140
B54b5a57a1bfc0dfe592d61d2425a7e1?s=48 yuji_developer
0
120
948c23c57a850629ff283f2a83088173?s=48 yotuba088
3
220
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
6
2.5k
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
27
6.1k
0712442105da0b6fe746bb85fd7989f1?s=48 ksmxxxxxx
0
220
264b44c0c6d60336f8b6a0fbab118984?s=48 mmazour
0
140
D2151968789d3a241fe9ce2c19936661?s=48 hisakakoji
0
420
49df09ab2eadd025342b9b3387936eb9?s=48 stefafafan
0
380
58d2fa98345951d9a57fdd6cfd5d0f64?s=48 aszx87410
0
500
D1dd88d67a1b17b9d2ad981b75d205f3?s=48 myamashii
1
710
86ee5be9683418fbfb216692fc3f27c5?s=48 macochin
0
170

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
285
110k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
510
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
380
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.4k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
649
110k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
370
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.8k

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