kickOff

[Tronjer]

Ich möchte nachfolgend ein Projekt von mir vor- und zur Diskussion stellen. Da es sich um keine Webseite handelt, poste ich es bewusst in diesem Forum. Ausgangspunkt war, dass zwar eine Vielzahl nützlicher Frameworks für den Frontend Workflow existieren, aber keines das diese Tools miteinander verknüpft. Da mir auch Yeoman keinen passenden Generator bot, habe ich etwas Eigenes auf Basis von Grunt geschrieben und es kickOff genannt.

kickOff verknüpft Bootstrap, Modernizr, jQuery, Sass, Compass und FontAweSome. Dabei lassen sich einzelne Module auch abschalten, falls einem das zuviel Overload ist.

Der eigentliche Fokus liegt allerdings auf den automatisierten Background Tasks mit Grunt. Zu den Features gehören u.a.:

- Überwachung von Dateiänderungen
- Kompilierung von Sass und JavaScript Dateien
- JavaScript Linting
- Optimierung von Bildern
- Ein Server auf localhost:3000, der selbständig startet und jegliche Änderungen sofort anzeigt, ohne dass man den Browser manuell refreshen muss.
- Automatische Erstellung eines Production Builds mit minified Dateien für optimale Performance auf Live.

Das Github Repo von kickOff findet ihr hier:
http://goo.gl/ycqeUJ

Und eine Demo der dem Repo beiligenden index.html hier:
http://goo.gl/DsjIT4

Würde mich freuen, wenn ihr es mal ausprobieren und Feedback liefern würdet.

 

[Sentence]

Moin,
hätte es ja gerne getestet, aber git chekout gibt ein Filename too long nach dem clonen:

fatal: cannot create directory at 'node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/download/node_modules/decompress/node_modules/adm-zip/test/assets/attributes_test/New folder': Filename too long

Scheint mir auch kein vernünftiger Pfad zu sein.

MfG

 

[Tronjer]

Erstmal danke, das sind so Dinge, die man selber nicht bemerkt.

Aber wie hast du es denn ausgecheckt? Ich verwende Sourcetree und wenn ich dort als Repo

[email protected]:Tronjer/kickOff.git

eingebe, wird es ohne Fehlermeldung ausgecheckt.

 

[Sentence]

Aha, unter Linux gehts. Für Windows ist die Struktur wohl nicht geeignet.
Kann an meiner Linux Kiste aber grad nicht arbeiten und teste das später mal.

Aber eine Frage nach überfliegen des Codes, kann ich z.B. für jQuery auch nen CDN angeben?

MfG

 

[Tronjer]

Mit ein paar Änderungen schon.

Out-of-the-box funktioniert es so, dass bei Erzeugung der Builds alle Libraries in js/libs.js gespeichert werden. Reihenfolge ist hier: jQuery, Bootstrap Scripts, alle anderen. Nur Modernizr ist nicht betroffen, weil er im Head steht.

Der "Controller" ist die Gruntfile.js. Dort werden alle Task-Dateien required, und in jeder einzelnen habe ich erklärende Comments eingefügt. Wenn du jQuery lieber per CDN einbinden willst, musst du in der concat-js-tasks.js die Zeile mit jQuery löschen.

 

[thecain]

Bei mir läuft auch alles sauber unter Linux...

Mir gefällt der Teil des Produktiv gehens sowie das automatische zusammenfassen der js files sehr gut. Da spart man sich viel Arbeit mit dem Einbinden etc.

Ich sehe jedoch keine grossen unterschied zu einem grunt-init ausser das ich hier manuell anpassungen vornehmen muss.
Was mir bei einem grunt-init jedoch fehlt, was yeoman bietet ist die Funktion spezifische Dinge zu generieren, wie z.B. einen Controller oder ähnlich.

Vielleicht hab ich jedoch auch einfach was übersehen, habs jetzt lediglich ein paar Minuten angeschaut...

 

[Tronjer]

Erstellt habe ich es übrigens unter OS X und anschließend auf der Kommandozeile zu Github committed. Warum das auschecken unter Windows Probleme macht, ist mir schleierhaft, allerdings arbeite ich auch nicht Windows.

Der Grundgedanke war, eine generische Boilerplate zusammenzustellen, die das liefert, was was ich zur Erstellung von Webseiten in der Regel brauche.. Dazu gehören jQuery, Bootstrap, Sass + Compass (der Helper wegen), jSLint sowie die Erstellung eines Production Builds auf Knopfdruck. Aber keine HTTML Boilerplate und Jasmine / Mocha. Die Yeoman Generatoren bieten da entweder zuviel oder zu speziell, und wenn ich mit Intializr anfange, muss ich mir die Hälfte der Tools von anderen Seiten zusammensuchen. Was mir noch vorschwebt, ist die Einbindung von RequireJS und eines Git-Tasks.

Controller werden hier nicht garantiert. Aber für ein Angular Projekt würde ich dann wohl auch Yeoman verwenden.

 

[thecain]

Contoller waren auch nur ein Beispiel, was hier zugegebenermassen kaum sinn machen würde. Bei Views würde sas wiederum schon anders aussehen... Jedenfalls so lange man ohne zusätzliche Frameworks arbeitet.

Git wäre definitiv interessant. Mit requirejs kenn ich mich leider kaum aus...

 

[Tronjer]

Für eine einfache Layout/View-Struktur könnte man auch auf Jade setzen. Das erfordert nicht zwangsläufig die Einbindung eines "echten" MV* Frameworks.

Aber es stellt sich immer die Frage, wo man anfängt und wo man aufhört. Um den Git Prozess wirklich zu automatisieren, müsste man Variablen für Repo, Branch, etc. setzen. Ansonsten bringt das kaum Vorteile gegenüber der Bash.