# Bower Wie oben schon beschrieben ist Bower ein Package Manager für Webprojekte. Das heißt alle heruntergeladenen Packete liegen auch im Verzeichnis des Projekts und können damit auch weiterverteilt werden. > Es ist der erste Startpunkt um Framr zu initialisieren. ## Bower Package Im Verzeichnis des Frameworks findet man auch eine Datei mit dem Namen `bower.json`, in dieser Datei werden alle heruntergeladenen Pakete notiert. In der Datei `.bowerrc` wird das Verzeichnis notiert, wo die Pakete installiert werden sollen. ``` javascript { "name": "Saffon", "version": "0.1.0", "dependencies": { "jquery": "1.9.0", "modernizr": "2.6.2", "conditionizr": "latest", "responsive-img": "latest", "enquire": "latest", "box-sizing-polyfill": "latest", "media-match": "v2.0.2", "respond": "1.2.0", "selectivizr": "1.0.2", "jkit": "latest", "jquery-mousewheel": "3.1.3", "jquery-easing": "latest", "bpopup": "0.9.3", "magnific-popup": "latest", "parsleyjs": "latest", "jquery.transit": "~0.9.9", "rem-unit-polyfill": "latest", "cssparent": "latest" } } ``` ## Bower Bedienung In der Datei sind einige Dependencies schon vorgegeben (zum Teil essentiell), können aber noch geändert werden. Um die Pakete herunter zu laden genügt der Befehl (man sollte sich im Verzeichniss befinden): ``` bash bower install ``` ### Bower Packages installieren Bower wird anfangen die Pakete herunter zu laden und sie eventuell auch noch entzippen. Möchte man weitere Pakete hinzufügen, z.B. jQueryUI genügt der Befehl: ``` bash bower install jquery-ui --save ``` Die Pakete kann man mit dem Befehl `bower search paketname` suchen. Mit dem Parameter `--save` wird das Paket gleichzeitig in die `bower.json` eingetragen. Man ist aber nicht gezwungen den Paketnamen zu verwenden, einige Pakete sind auch gar nicht in der Bower Library registriert, dafür kann man den Git Endpoint ansteuern: ``` bash bower install git://github.com/someone/some-package.git --save ``` Falls die Pakete nur als Zip Datei über Webdownload erhältlich sind kann man diese ebenso mit Bower herunterladen: ``` bash bower install http://url.de/paket.zip --save ``` ### Bower Packages deinstallieren Um Pakete zu deinstallieren genügt der Befehl: ``` bash bower uninstall jquery-ui --save ``` Auch hier ist das Parameter `--save` wichtig. Ohne wird die `bower.json` nicht modifiziert. ### Installations Probleme Falls Bower Schwierigkeiten hat, Pakete zu installieren, liegt das am Bower Cache. Der sollte dann einfach gelöscht werden: ``` bash sudo bower cache-clean ``` > In der Regel genügt es die Datei `bower.json` an einen anderen Developer zu sharen. **Ohne gute Systemkenntniss keine der vorgegebenen Packages entfernen nur hinzufügen** # Grunt Nachdem mit Bower die Dependencies heruntergeladen worden sind, ist Grunt die zweite Station und zugleich die zentrale Anlaufstelle für alle weiteren Prozesse (außer man möchte zwischenzeitlich noch weitere Pakete hinzufügen). ## Grunt Packages Im Hauptverzeichnis findet man die Datei `packages.json` dort sind alle Variablen und Packages verzeichnet die für den Betrieb von Grunt nötig sind. ``` javascript { "name": "Saffron", "version": "0.1.0", "description": "Awesome Template", "author": "Sascha Fuchs", "authormail": "sascha@wearewire.com", "authorurl": "http://wearewire.com", "spritefolder": "mysprite", "devDependencies": { "grunt": "~0.4.1", "grunt-banner": "~0.1.4", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.2", "grunt-contrib-jade": "~0.7.0", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-compass": "~0.2.0", "grunt-contrib-watch": "~0.4.4", "grunt-contrib-copy": "~0.4.1", "grunt-smushit": "~1.0.1", "grunt-mkdir": "~0.1.1", "grunt-modernizr": "~0.3.0", "grunt-contrib-clean": "~0.4.1", "grunt-grunticon": "~0.3.3", "grunt-svgmin": "~0.2.0", "grunt-svg2png": "~0.2.0" } } ``` ## Grunt Bedienung Die Datei ist ähnlich der `bower.json` mit dem großen Unterschied das die Dependencies hier unter `devDependencies` gelistet werden. Im oberen Part findet man die Sideinfos, die über den Grunt Banner Task in CSS und JS Files geschrieben werden können. Unter `spritefolder` wird der Name des Spritefolders notiert - da dieser Folder über Grunt erstellt wird und mit SASS/Compass bei der Spritegenerierung angesprochen wird. Bevor wir aber mit den Tasks starten müssen wir erst die Grunt Dependencies herunter laden (man sollte sich im Verzeichnis befinden): ``` bash npm install ``` Node wird mit NPM alle Pakete herunterladen und diese im Verzeichnis `node_modules` installieren. ### Grunt Packages installieren Möchte man zusätzliche Grunt Pakete installieren geht man ähnlich vor wie bei Bower (auf der Webseite von [Grunt][10] findet man die entsprechenden Plugins). ``` bash npm install paketname --save-dev ``` Das Parameter zum beschreiben der `package.json` lautet hier `--save-dev` da die Pakete unter devDependencies gelistet werden. ### Grunt Packages deinstallieren Pakete deinstallieren dann auf dem umgekehrten Weg: ``` bash npm uninstall paketname --save-dev ``` > Im Gegensatz zu Bower Packages, sind diese Pakete aber noch nicht aktiv, Grunt Packages muss man erst in der `gruntfile.js` Datei einrichten. > **Ohne gute Systemkenntniss keine der vorgegebenen Packages entfernen nur hinzufügen!** ## Grunttasks In der Datei `gruntfile.js` werden alle Tasks eingetragen die über Grunt gestartet werden sollen. Die Datei ist soweit schon vorbereitet, das man in der Regel nur die Tasks über das Terminal starten muss. Wer zusätzliche Pakete hinzufügt, muss diese in der `gruntfile.js` erst einrichten. Kommen wir nun zu den vorbereiteten Task gruppen ### Init ``` bash grunt init ``` Startet den initialen Task um das Framework für die Entwicklung vorzubereiten. Sollte daher auch nur einmal gestartet werden. 1. Grunt erstellt die Verzeichnisse im App Folder 2. Kopiert Javascripte aus dem `src/bower` Verzeichnis in das das `app/` Verzeichnis 3. Fasst einige Javascripte in der `script.js` Datei zusammen und kopiert diese in das `app/components/js` Verzeichnis 4. Konfiguriert den Modernizr und kopiert diesen in das `app/components/js` Verzeichnis 5. Aktiviert den SASS Compiler um das CSS File zu generieren und in `app/components/css` zu speichern 6. Startet den Coffee Compiler um das JS File `app.js` zu generieren und unter `app/components/js` zu speichern, erstellt dabei noch eine Source Map 7. Startet den JADE Compiler um die HTML File zu generieren die dann in `app/` gespeichert werden. ### Server ``` bash grunt server ``` Startet den Livereload Server. Grunt wird dabei bei Änderungen an den .jade, .sass oder .coffee Files den Compiler starten und den Browser refreshen. Für letzteres sollte man sich die [Chrome Extension][11] installieren. > Wichtig zu erwähnen ist, das CSS Änderungen dynamisch in die Seite injected werden, während bei Änderungen an JS oder HTML die Seite reloaded wird. ### Slicy ``` bash grunt slicy ``` Wer mit der App [Slicy][12] seine Icons aus den PSD Files schneiden lässt, sollte diese Dateien in das Verzeichnis `src/slicy` ablegen. Der Task wird die Dateien umbenennen (nur bei Retina Images mit @2x da der SASS kompiler damit nicht zurecht kommt) und kopiert die Bilddateien dann in die entsprechenden Verzeichnisse für die Sprite Generierung. - `app/components/img/sprite' = non retina images - `app/components/img/sprite_2x' = retina images ### SVG ``` bash grunt svg ``` Wer mit SVG Dateien als arbeitet, legt diese einfach in das Verzeichnis `src/svg` ab. Der Task wird die Dateien dann in das Verzeichnis `app/components/img/single` kopieren, dabei noch minifizieren und von jeder Grafik noch ein PNG Image als Fallback erstellen. Die Bilddatei kann dann über das SASS Mixin `insert-image()` in das CSS File geparst werden. Um die entsprechenden Größen zu definieren sollte man mit Illustrator (oder ähnlichen Programmen) die SVG in Pixelgröße definieren. Bei der Umwandlung von SVG in PNG wird die Bildgröße verwendet, während die SVG Grafik weiterhin skalierbar bleibt. [Workflow Tutorial][13] ### Icon ``` bash grunt icon ``` Der einfachere Task zum einbinden von SVG Images mit PNG Fallbacks. Hier werden die SVG Dateien ebenso in `src/svg` abgelegt, der Task wird die SVG Dateien in ein Inline SVG Image umwandeln und die entsprechenden Fallbacks aktivieren. Die PNG Fallback Images liegen im Verzeichnis `app/components/img/single`. In der `jadeconfig.jade` muss dann aber die Variable `svgicon` auf `true` gestellt werden, da im HTML Header ein Javascript geladen wird, das die SVG Images und gegebenfalls die Fallback Images lädt. Näheres hier: [Grunticon][14] > Der Task ist ansich einfacher zu handhaben, aber man hat weniger Kontrolle. Wer mehr Kontrolle möchte verwendet `grunt svg`. ### Iconfont ``` bash grunt webfont ``` Aus einzelnen monochromen SVG Grafiken lassen sich auch Iconfont erstellen. Grunt generiert dabei die Webfonts die man für die Einbindung benötigt. Die einzelnen Klassen werden ein ein SCSS File im Verzeichnis `lib/sass/iconfont` notiert, das wiederum automatisch in das CSS File kompiliert werden. > Es eignen sich nur monochrome Grafiken für die Verwendung in einer Iconfont ### Banner ``` bash grunt banner ``` Schreibt in die CSS und JS Dateien den Banner in den Header. Die Angaben hat man in der `packages.json` festgelegt. ### Image ``` bash grunt image ``` Dieser Task wird alle Bilddateien in den Verzeichnissen `assets/images/`, `components/img/` komprimieren. ### Minify ``` bash grunt minify ``` Der Task wird die Datei `components/js/scripts.js` komprimieren und unter `components/js/scripts.min.js` speichern. ### Manifest ``` bash grunt manifest ``` Erstellt eine HTML5 Manifest Datei. ### Htmlmin ``` bash grunt htmlmin ``` Minifiziert die HTML Files. ### Production ``` bash grunt production ``` Erstellt das finale Build. 1. CSS wird minifiziert kompiliert 2. Die App.js wird ohne Debuging kompiliert 3. Die HTML Files werden ohne Debuging kompiliert 4. Der HTML Output wird minifiziert 5. Die script.js wird minifiziert 6. In die JS und CSS Files wird der Banner implementiert 7. Alle Bilddateien werden komprimiert. 8. Der Banner wird in die CSS und JS Dateien geschrieben 9. Die Bilddateien werden komprimiert # Framework Structure Die Struktur von Framr ist klar gegliedert in Lib (Quelle), Src (Ablage) und App (Ausgabe). ## App Im App Verzeichniss halten sich alle Dateien auf die für den Betrieb der Seite/App nötig sind. Die Dateien werden im laufenden Entwicklungsprozess in dieses Verzeichnis kopiert oder kompiliert. > Das Verzeichnis ist am Anfang noch recht leer, die innere Stuktur erstellt sich beim ersten Start von Grunt. ## Lib In diesem Verzeichnis befinden sich die Quellfiles für die Compiler. ``` bash lib/sass/*.sass lib/coffee/*.coffee lib/jade/*.jade ``` ## Src In diesem Verzeichnis werden die Dateien abgelegt, die über Grunt in das App Verzeichnis kopiert werden. **Einige Verzeichnise erstellen sich erst selbst nach dem man `grunt` aktiviert hat** [1]: http://rubyinstaller.org/ [2]: http://nodejs.org/ [3]: http://mxcl.github.io/homebrew/ [4]: http://sass-lang.com [5]: http://compass-style.org [6]: http://coffeescript.org/ [7]: http://jade-lang.com/ [8]: http://gruntjs.com/ [9]: http://bower.io/ [10]: http://gruntjs.com/plugins [11]: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei [12]: http://macrabbit.com/slicy/ [13]: http://danielmall.com/articles/svg-workflow-for-designers/ [14]: https://github.com/filamentgroup/grunticon [image-1]: colum.png [image-2]: container.png [image-3]: grid.png