nicht angemeldet
Minify der Frontend- Files
0 
Der Martin
2 0
Minify der Frontend- Files
Hallo,
ich hätte eine Frage zum Minifyen von meinen Frontend- Files. Ich hab jetzt brav meine HTML, CSS und JS Files erstellt und möchte diese jetzt minifien.
Ich verwende für mein dependency management "bower(.json)". Da sind alle meine Dependencies drinnen. wie macht ihr das mit euren Frontend Files. Ich will nciht meine 80 Files je in einen minifier schmeißen und dieses Min- file dann wieder in meine IDE damit ich dann ein Package mit den Min- files erzeugen kann.
Gibts da was eleganteres bzw. wie macht ihr das?
Danke! Hannes
-
Mahlzeit,
ich hätte eine Frage zum Minifyen von meinen Frontend- Files.
Ich hab jetzt brav meine HTML, CSS und JS Files erstellt und möchte diese jetzt minifien.mit welchem Ziel?
Ich weiß, die Frage klingt ketzerisch, aber Minification bedeutet ja vor allem, unnötigen Whitespace zu entfernen (Zeilenumbrüche, Einrückungen) und lange, "sprechende" Bezeichner durch möglichst kurze zu ersetzen. IMO gibt es zwei mögliche Gründe, warum man das tun möchte:
- Die Lesbarkeit des Quellcodes massiv einschränken (Obfuscation)
- Das Transfervolumen verringern
Falls 1. dein Ziel ist, bin ich raus aus der Nummer, weil ich noch nie das Bedürfnis hatte, das zu tun und dementsprechend keine Erfahrung mit den Tools und Methoden habe. Falls du aber eher 2. als Ziel siehst, würde ich mich gar nicht weiter um Minification kümmern, sondern dafür sorgen, dass der Webserver alle diese textbasierten Dateien (HTML, CSS, JS) komprimiert (gzipped) ausliefert. Das reduziert die zu übertragene Datenmenge um etwa den gleichen Faktor, vielleicht sogar noch mehr.
So long,
Martin-
Hallo Martin,
ich hätte eine Frage zum Minifyen von meinen Frontend- Files.
Ich hab jetzt brav meine HTML, CSS und JS Files erstellt und möchte diese jetzt minifien.Die übliche Variante ist, dass man Tools wie Brunch dafür benutzt. Das kann dir deine JS-Files aneinander hängen, minifyen und so weiter.
mit welchem Ziel?
Das übliche Ziel ist das Sparen von Bandbreite.
- Die Lesbarkeit des Quellcodes massiv einschränken (Obfuscation)
- Das Transfervolumen verringern
Falls 1. dein Ziel ist, bin ich raus aus der Nummer, weil ich noch nie das Bedürfnis hatte, das zu tun und dementsprechend keine Erfahrung mit den Tools und Methoden habe.
Das bringt auch nicht so viel, weil die Browser mit den Inspektoren eine recht gute Methode haben, die Minification zu grossen Teilen wieder rückgängig zu machen.
Falls du aber eher 2. als Ziel siehst, würde ich mich gar nicht weiter um Minification kümmern, sondern dafür sorgen, dass der Webserver alle diese textbasierten Dateien (HTML, CSS, JS) komprimiert (gzipped) ausliefert. Das reduziert die zu übertragene Datenmenge um etwa den gleichen Faktor, vielleicht sogar noch mehr.
Im Zuge des Min-Maxing macht man natürlich beides. Wenn man pro User 1kb spart, ist man bei 10k Usern bereits bei 9mb. Das läppert sich. Dazu kommt, dass mobiler Traffic massiv zugenommen hat (es gibt Meldungen, dass er den „normalen“ Traffic weltweit überholt hat) und dort jedes Byte zählt.
LG,
CK -
also 2tens ist mein Ziel, ich will die Bandbreite sparen und den Browser nicht zu sehr belasten.
-
Ich benutze dafür üblicherweise einen der Taskrunner Grunt oder vorzugsweise Gulp. Wenn du nur minifizieren möchtest wäre das wohl mit Kanonen auf Spatzen geschossen. Wenn allerdings noch andere Buildtasks hinzukommen (concatenation, linting, jsdoc...) dann macht es sich bezahlt, zumal die Lernkurve auch recht steil ist.
-
Danke für die Antwort.
Das hab ich mir auch schon überlegt, ob ich nicht so ein Tool verwenden soll. Was ich aktuell verwende ist bower zum installieren der Dependencies. Ich bin mir aber noch nicht sicher, wie das mit so einem Build Tool generell funktioniert. Was kommt da dann raus. Ich hab ja eine Java Applikation mit mehreren JARs und eine Jar beinhaltet ja die Frontend- Resourcen. Geht das, dass z.B. Gulp auch eine JAR erzeugt? Danke!
-
-
Hi,
ich habe mal mit https://prepros.io/ gearbeitet. Das ist eine grafische Oberfläche für viele uglyfier, und pre-/post-processing (js, css, bilddateien, less , ... younameit). Für Mac User gibt es https://incident57.com/codekit/. http://koala-app.com/ ist auch am Start, habe ich aber noch nicht getestet.
Probier's aus.
lg
-
Danke!
Ich hab ja den Frontend- Code in einem JAR im endeffekt und ich habe versucht, mit einem Maven- Plugin das minfien hinzubekommen, Aktuell hab ich noch probleme mit der Ordnerstruktur.
Hier das Maven Plugin:
<groupId>com.samaxes.maven</groupId> <artifactId>minify-maven-plugin</artifactId>
-