JavaScript richtig einbinden

Hallo zusammen,

in den Einstellungen gibt es ja die Option "Skripte komprimieren" ("Eine komprimierte Version der kombinierten CSS- bzw. JavaScript-Dateien").

Wie bzw. wo muss ich meine eigenen JavaScript-Dateien einbinden, damit sie komprimiert werden. Denn aktuell schreibe ich das immer in das Seitenlayout unter den Punkt "Zusätzliche Head-Tags", was nicht zur Komprimierung zu einer Datei führt.

Mit den CSS-Dateien klappt das ja wunderbar, die kann man über interne bzw. externe Dateien im Layout einbinden, aber wie ist es mit JS?

Viele Grüße
Dako314

Die Einstellung zur Komprimierung der Scripte im BE ist nicht nötig. Contao erzeugt dann eine myscript.gz Datei, welche geladen wird. Die Komprimierung ist keine Minifizierung, sondern ein Packen der Datei, so wie mit 7zip. Auf deinem Server sollte mod_deflate laufen, damit werden deine Dateien dann schon automatisch komprimiert an den Client gesendet. mod_deflate ist in der .htaccess bereits eingestellt.

Ein Hinzufügen von JS-Dateien zu den kombinierten Dateien ist im Layout noch nicht möglich. Du kannst aber z.B. j_- oder moo_-Templates erstellen, welche du dann einbindest. In den Templates dann

PHP-Code:

---

<?php
  $GLOBALS['TL_CSS'][]        = 'files/my.css|static'; // HEAD
  $GLOBALS['TL_USER_CSS'][]   = 'files/my.css|static'; // HEAD
  $GLOBALS['TL_JAVASCRIPT'][] = 'files/my.js|static';  // HEAD
  $GLOBALS['TL_BODY'][]       = '<script src="files/my.js"></script>'; // BODY
?>
<p>Ich komme auch direkt über den schließenden BODY, so wie mit TL_BODY</p>

---

Den Unterschied zwischen TL_CSS und TL_USER_CSS kenne ich jetzt nicht. Mit der Variablen static nach der Pipe | gibst du die Anweisung, dass diese Datei mit in den Combiner soll. TL_BODY kommt unten hin vor den schließenden BODY.

Allerdings werden auch hier keine Dateien minifiziert. Contao selbst benutzt dazu Dateien welche bereits minified vorliegen.

Für CSS muss es |all|static sein oder ||static

Für @media all reicht |static, ansonsten kannst du auch noch
|[media](css only)|static|async(js only)|[int version]
benutzen.