Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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
Datenkompression - Ein praktischer Leitfaden für den Einstieg
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
0
190
Stress lass nach
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
0
59
Das kleine 1x1 der Web-Performance
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
1
900
Einführung in Grunt
29958f86da5d76e052520ccfc24dbde9?s=48 heikomamerow
1
140

Other Decks in Programming

See All in Programming
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
2f42f32689c8244280dd01d864f92079?s=48 dwchiang
0
130
Make the most of Django - PyCon Italia 2022
6b8e2101579190ad96e747e01c279898?s=48 pauloxnet
0
110
模組化的Swift架構(二) DDD速成
A3d3b179955bdea9fc05b3251f1b1f10?s=48 haifengkao
0
340
Custom Design Systems in Compose UI
E86c7de302b490b7f2a67e54960510d0?s=48 rharter
5
510
IE Graduation (IE の功績を讃える)
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
20
12k
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120
はじめてのプルリク - BLEA 編
822eaa655305fe3cffb0b034913f0cd2?s=48 watany
0
140
engineer
E6706306bf41c5a5675e7296ecdb4103?s=48 spacemarket
0
460
Terraform Plan/Apply結果の自動通知
92a1e043fcefaed6e1b89182b1cd34a5?s=48 ymmy02
0
270
設計ナイト2022 トランザクションスクリプト
6521324f6ab5266cdcde1dd05945a27b?s=48 shinpeim
11
2k
GoogleI/O2022 LT報告会資料
2bd3b8c3550384ab61d671b673c119bb?s=48 shinsukefujita1126
0
230
What's new in Jetpack / I/O Extended Japan 2022
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
1
170

Featured

See All Featured
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
10
3.3k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
8.9k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k

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