automate your workflow

Talk about automating and optimizing the frontend web workflow with sass, sourcemaps, gulp and yeoman generators

Transcript

1. automate your workflow Daniel Holpfer
2. Grundaufbau eines Web Projekts
3. Werkzeuge
4. Browser Reload browsersync.io
5. CSS Preprocessor sass-lang.com lesscss.org oder
6. Sass Magic
7. Sass SourceMaps
8. Build Tool / Task Runner gulpjs.com gruntjs.com oder
9. Package Manager npmjs.com bower.io brew.sh (mac only)
12. Globale Installation der Tools 1x pro Rechner > brew install node > npm install -g gulp bower
13. Installation im Projekt Gulp und Sass > mkdir testapp && cd testapp > npm init > npm install --save-dev gulp gulp-sass
14. package.json
15. gulpfile.js mit Sass Task
16. Befehle manuell ausführen wird auf Dauer mühsam
17. Gulp Watch
18. gruntfile.js mit Sass Task
19. there‘s a plugin for that
21. Nur benutzen was man wirklich braucht
22. Gulpfile
23. package.json Dependencies
24. Gulp Workflow Gulp installieren gulpfile.js Datei erstellen Dependencies installieren Tasks im Gulpfile erstellen Tasks ausführen
26. Die richtigen Tools wählen Die richtigen Tools erleichtern die Arbeit enorm aber nicht alle Tools machen bei allen Projekten Sinn
27. All das muss bei jedem Projekt neu angelegt werden?
28. yeoman to the rescue
29. Yeoman yeoman.io
30. vorgefertigte Generatoren nutzen yeoman.io/generators/
31. npm install –g generator-webapp
32. yo webapp
33. Entscheidungshilfen
34. Linkliste Gulpjs. gulpjs.com/plugins - Gulp Plugins npmjs.com/package/gulp-sass - Sass Plugin für Gulp www.browsersync.io/docs/gulp/ - BrowserSync mit Gulp nutzen yeoman.io/generators - Yeoman Generators www.npmjs.com/package/generator-onepager - Onepage Generator www.iterm2.com/ - konfigurierbarer Terminal für OS X github.com/d4ny0 - Daniel Holpfer auf Github