• Jeder User im Forum verpflichtet sich zur Akzeptanz und zur Einhaltung dieser Regeln:
    1. Umgangston
      Ein angemessener höflicher Umgangston, ohne Beleidigungen, Beschimpfungen und aggressive Postings ist für jedes Mitglied Pflicht.
    2. Beiträge
      Jedes Mitglied sollte sich bemühen nur sinnvolle Beiträge zum Thema zu posten. Dabei ist unbedingt vorher zu prüfen, ob das Thema vorher schon einmal diskutiert wurde und daher fortgesetzt werden kann
      • Suchfunktion benutzen!
      • offizielle Doku lesen!
    3. Haftung
      Jeder Beitragsersteller übernimmt die alleinige Verantwortung seiner Inhalte.
    4. Werbung
      Wir erlauben keine Beiträge, Signaturen, Private Nachrichten oder eMails an Benutzer, die Werbung enthalten. Ausgenommen
      sind Stellengesuche /-angebote, welche ausschließlich im Forum "Stellengesuche" veröffentlicht werden dürfen.
    5. Verstöße
      Regelwidrige Beiträge sollten dem Team gemeldet werden. Nach deren Überprüfung werden wir schnellstmöglich
      entsprechend handeln.
    6. Authorität
      Den Anweisungen der Team-Mitglieder (Administratoren und Moderatoren) sind in diesem Forum Folge zu leisten.
      Bei Fragen oder Beschwerden bitte an diese wenden.
    Wir möchten Euch darauf aufmerksam machen, dass es bei Verstößen gegen einen oder mehreren der oben genannten
    Punkte dem Team frei steht entsprechend zu handeln. Dies kann z.B. das Löschen eines Beitrags, das Ausschliessen bzw.
    Sperren von Mitgliedern oder aber lediglich eine Verwarnung sein.

    In diesem Zusammenhang sollte erwähnt werden, dass das Forum automatisch die IP-Adresse jedes Beitrag-Erstellers
    speichert. Bei schweren Vergehen, behalten wir es uns vor, die IP-Adresse zur Strafverfolgung weiterzugeben.
  • Willkommen im Zend Framework Forum

    ZF1 Zend Framework 1 + ZF2 Zend Framework 2

    Das Zend Framework Forum ist seit 2006 die erste Anlaufstelle für Zend Framework Entwickler in Deutschland. Mit über 70.000 Beiträgen und einer steigenden Nutzerzahl bietet das Forum hilfreiche Themen und ZF-Tutorials für professionelle Entwickler, fortgeschrittene Programmierer sowie Zend Framework Einsteiger.
    Wenn dies Dein erster Besuch in der Zend Framework Community ist, lies bitte zuerst die Hilfe - FAQ durch. Du musst Dich registrieren, bevor Du Beiträge verfassen kannst. Klicke oben auf 'Registrieren', um die Registrierung zu starten. Du kannst auch jetzt schon Beiträge lesen. Hier im Forum findest Du die Zend Framework Hilfe, die Du suchst!

    Grüße an alle Zend Framework Entwickler. Das Team vom Zend Framework Forum!

    Drupal Agentur

Enviroment / Minify

rniederer

New member
Hallo zusammen

In meinem nächsten ZF-Projekt möchte ich die JS- und CSS-Files vorkomprimieren. Ich nutze dafür ein bower-Package. Das funktioniert bereits und bereitet keine Probleme. Dabei durchlaufe ich alle JS- und CSS-Files und erstelle eine neue, komprimierte Datei:

*.js => *.min.js
*.css => *.min.css

Das heisst, jedes JS und CSS-File ist doppelt vorhanden. Einmal unkomprimiert und einmal komprimiert.

Nun möchte ich in der Entwicklungs-Umgebung die unkomprimierten Dateien laden und in der Produktiv-Umgebung die komprimierten. Wie stelle ich das an?

PS: Habe irgendwo gelesen, dass ZF auch JS- und CSS-Files komprimieren kann, aber das passiert zur Laufzeit und das will ich grundsätzlich nicht.

Gruss
 

Kaiuwe

Super-Moderator
Nun möchte ich in der Entwicklungs-Umgebung die unkomprimierten Dateien laden und in der Produktiv-Umgebung die komprimierten. Wie stelle ich das an?
Beim ZF1 einfach in der „Bootstrap“-Klasse die Umgebung abfragen, die Ressource „Zend_View“ holen und per „HeadScript“-View-Helfer die entsprechenden Dateien hinzufügen.

PS: Habe irgendwo gelesen, dass ZF auch JS- und CSS-Files komprimieren kann, aber das passiert zur Laufzeit und das will ich grundsätzlich nicht.
Nein, kann das ZF in der Version 1, 2 und auch in der kommenden 3 nicht. Ist maximal ein Modul, View-Helfer oder ähnliches von einem Dritten – dies ist auch gut so.
 

rniederer

New member
Vielen Dank für deine Antwort.

Klar, das könnte ich machen. Aber ich füge sehr viele JS- und CSS-Files in den einzelnen Actions hinzu. Die "Haupt"-Files wie z.B. "bootstrap.css" kann ich in der "Bootstrap"-Klasse abhandeln.

Aber wie mache ich das mit den JS- und CSS-Files, welche ich in einer Action hinzufüge?
 

Kaiuwe

Super-Moderator
Aber ich füge sehr viele JS- und CSS-Files in den einzelnen Actions hinzu.
Ganz einfach: weglassen und vorher jeweils zusammenführen.

Dies hat mehrere Vorteile:
  • Du musst nur noch an einer Stelle in der Anwendung die CSS- und JS-Dateien hinzufügen. (Kontroller bleiben sauber!)
  • Tools wie Google „PageSpeed“ werden es belohnen.
  • Die Nutzer deiner Anwendung erhalten die Seite schneller ausgeliefert.
 

rniederer

New member
Ganz einfach: weglassen und vorher jeweils zusammenführen.
Ok, das verstehe ich jetzt nicht ganz.

Wie soll ich das machen? Ich habe folgende Files, die ich IMMER (in jeder Action) lade:
- jquery.js /jquery.min.js
- bootstrap.js / bootstrap.min.js
- bootstrap.css / bootstrap.min.css

Dann lade ich auf der Seite "/client/edit/" z.B. noch folgende Files:
- client/edit.js / client/edit.min.js
- comment/form.js / comment/form.min.js

Das File "comment/form.js" dient dazu, den Code strukturiert aufzusplitten und dass die einzelnen Files nicht zu gross werden.

Und auf der Seite "/client/search/" lade ich noch folgende Files:
- client/search.js /client/search.min.js

Wie soll ich die Files vorher schon zusammenführen? Ich habe auf jeder Action andere Files, die geladen werden.
 

Kaiuwe

Super-Moderator
Wie soll ich die Files vorher schon zusammenführen? Ich habe auf jeder Action andere Files, die geladen werden.
Den gesamten JavaScript-Code in eine Datei setzen und diese dann laden. Das Gleiche für CSS. (Kannst du in deiner IDE bestimmt einrichten.)
Mit HTTP in der Version 1 musst du die Anzahl der Anfragen an den Webserver so klein wie möglich halten.


Für das Debugging kann es einfacher sein, den Code nicht noch extra zu minimieren – zusammenzustauchen. Daher ist es durchaus sinnvoll für die Entwicklung eine „foo.js“ statt einer „foo.min.js“ zu verwenden. Für den Live-Betrieb sollte wieder minimiert werden.

Im Live-Betrieb dann noch zusätzlich den Webserver anweisen, dass komprimiert ausgeliefert wird (Gzip/Deflate) und wie lange die Datei gültig ist, bevor diese neugeladen werden muss (Expires).
 

rniederer

New member
Den gesamten JavaScript-Code in eine Datei setzen und diese dann laden. Das Gleiche für CSS. (Kannst du in deiner IDE bestimmt einrichten.)
Das ist aber nicht optimal, sorry. Dann lade ich den JS-Code von mehreren Dutzend Seiten. Ein riesiger Overhead! Zur Erklärung. Ich möchte ein Admin-Tool entwickeln - Kundenverwaltung, Ticketing, etc.

Mit HTTP in der Version 1 musst du die Anzahl der Anfragen an den Webserver so klein wie möglich halten.
Ja, das ist mir bewusst. Kann durchaus schneller sein, wenn etwas mehr Bytes geladen werden müssen, dafür ein Request weniger. Aber wie gesagt, möchte ich nicht alle JS- und CSS-Files bei jedem Request laden. Denn dann könnte ich gleich eine Angular-Applikation schreiben.

Für das Debugging kann es einfacher sein, den Code nicht noch extra zu minimieren – zusammenzustauchen. Daher ist es durchaus sinnvoll für die Entwicklung eine „foo.js“ statt einer „foo.min.js“ zu verwenden. Für den Live-Betrieb sollte wieder minimiert werden.

Das ist auch mein Ziel.
 

rniederer

New member
Bitte bedenke: Dies wird nur einmal geladen! Bei alle weiteren Seitenaufrufen muss nur noch das HTML übertragen werden, der Rest ist bereits beim Client vorhanden.
Mmmhhh. Jetzt machst du mich gleich ein wenig nachdenklich :)

Müsste mal schauen, wie gross die Datei bei einem anderen Projekt würde und was ich alles beim Hoster konfigurieren kann (gzip). Wäre wirklich eine Option.

Aber zu meiner Frage. Gäbe es trotzdem eine Möglichkeit? Irgendwie ein Helper, dem man den Pfad übergeben kann und der prüft, ob es sich um die DEV oder PROD Umgebung handelt und anschliessend das ".min" hinzufügt?
 

Kaiuwe

Super-Moderator
Mmmhhh. Jetzt machst du mich gleich ein wenig nachdenklich :)
Sehr gut! :)

Müsste mal schauen, wie gross die Datei bei einem anderen Projekt würde und was ich alles beim Hoster konfigurieren kann (gzip). Wäre wirklich eine Option.
Mach das mal. Denn auch jQuery kommt nur so auf die angegebenen 32kb:

Lightweight Footprint – Only 32kB minified and gzipped.
Irgendwie ein Helper, dem man den Pfad übergeben kann und der prüft, ob es sich um die DEV oder PROD Umgebung handelt und anschliessend das ".min" hinzufügt?
Müsstest dir einen eigenen View-Helfer schreiben. Im Kontroller selbst, kommst du an die „Umgebung“ per:
PHP:
$bootstrap = $this->getInvokeArg('bootstrap');
$environment = $bootstrap->getEnvironment();
 

st0ffel

New member
Sorry, wenn ich mich an die Diskussion so ranhänge, aber das Thema interessiert mich auch.

Ich würde gerne das Minimieren von JavaScript und CSS automatisiert in einem Build-Skript erledigen (so das ich es nur ein Mal machen muss und kein separates Modul im Live-Betrieb benötige).

Ist sowas möglich? Wenn ja, wie?


Gruß,
Marco
 

st0ffel

New member
Es gibt viele Möglichkeiten, aber vom ZF würde ich dabei abraten, denn es ist nicht dessen Aufgabe.
Ich weiß ;-) - habe mich da wohl falsch ausgedrückt.

Worauf ich hinaus will: wie kann ich die Abhängigkeiten (bzw. die Reihenfolge) der Skript untereinander beibehalten?

Wenn beispielsweise x.js von z.js abhängt und ich Dateien einfach im Dateisystem aneinanderhänge und dann minimiere,
dann bekomme ich möglicherweise einen Fehler, weil auf Code zugegriffen wird, der noch gar nicht da ist. Im Framework
könnte ich das ja beispielsweise append-/prependFile abbilden. Das Buildsystem müsste das dann auch berücksichtigen.

Oder verwende ich für sowas lieber require.js (oder ähnliches). Bei kleinen Sachen scheint mir das ein ziemlicher Overkill
zu sein.

Noch eine Frage: Angenommen ich habe mein minimiertes JavaScript irgendwo im Dateisystem liegen. Was wäre der beste
Weg, um die Datei mit Cache-Breaker (z.B. einen Counter, die Build-Nummer oder den Hash des letzten Git-Commits)
in den Code zu bekommen?

Wäre nett, wenn jemand da seine Erfahrungen schildern könnte. Danke!

Marco
 

Kaiuwe

Super-Moderator
wie kann ich die Abhängigkeiten (bzw. die Reihenfolge) der Skript untereinander beibehalten?
Das wird im Hook von Git, in Phing, Koala oder Co. einfach festgelegt.

Was wäre der beste Weg, um die Datei mit Cache-Breaker (z.B. einen Counter, die Build-Nummer oder den Hash des letzten Git-Commits) in den Code zu bekommen?
In den Code? Wird wohl nicht viel helfen, denn von der Änderung bemerkt der Browser nichts. Es könnte das Hinzufügen eines Query-Strings helfen, der sich aus dem Änderungsdatum der CSS- bzw. JS-Datei ergibt. (View-Helfer?!)
 
Oben