Minimizzare un'intera directory mantenendo le relazioni tra elementi/stile/script?

Question

Esistono attualmente soluzioni che possono minimizzare un'intera directory di progetto? Ancora più importante, esistono soluzioni che possono abbreviare nomi di classe, ID e tenerli coerenti in tutti i documenti?

Qualcosa che può trasformare questo:

Index.HTML ---

<div class="fooBar"> 
    <!-- Code --> 
</div> 

Styles.css ---

.fooBar { 
    // Comments and Messages 
    background-color: #000000; 
} 

Index.js ---

$(".fooBar").click(function() { 
    /* More Comments */ 
    alert("fooBar"); 
}); 

Into questo:

Index.HTML ---

<div class="a"></div> 

Styles.css ---

.a{background-color:#000;} 

Index.js ---

$(".a").click(function(){alert("fooBar");}); 

Answer 1

Cosa stai cercando non è minifying, ma compressione. La minimizzazione per definizione solo rimuove gli spazi bianchi, poiché la riduzione degli identificatori altera l'interfaccia, potenzialmente interrompendo gli script esterni che dipendono da esso. Per questo motivo, la minimizzazione è intrinsecamente "più sicura" della compressione, anche se in un sistema chiuso (ad esempio un'app web incapsulata), la compressione può essere una buona idea.

Per Javascript, la maggior parte delle persone utilizza lo YUI Compressor o Dean Edwards' Packer.

Per i CSS, ci sono molti strumenti per "ottimizzare" gli stili, ma non conosco nessuno che abbrevia i nomi delle classi. I motivi potrebbero essere diversi:

1. Per comprimere un file CSS, lo script dovrebbe conoscere tutti i file HTML che lo includono, al fine di modificare i riferimenti di classe e id al loro interno. A seconda delle dimensioni e della struttura del tuo sito web, la sua potrebbe essere non banale.
2. Dopo la compressione, l'HTML semantico diventa meno leggibile, poiché <span class="image_caption"> diventa <span class="a12"> o, peggio ancora, <p id="a12">.

Sarebbe sicuramente possibile fare qualcosa di simile a ciò che si descrive (e sto effettivamente lavorando su un CMS/framework personale che sarà ), ma per essere mantenibile, sarebbe probabilmente dovuto essere una parte integrata di un CMS strettamente strutturato, che comprime tutti i file "dietro le quinte" ogni volta che viene pubblicata una nuova modifica, mantenendo tutti i file originali in modo che il sito possa essere mantenuto nel suo insieme.

Answer 2

Io uso http://www.w3compiler.com/ che fa la compressione e offuscamento

Answer 3

io uso YUICompressor per minifying il mio file CSS e JS, e un programma chiamato replace di fare la sostituzione personalizzata di stringhe in formato HTML (rimozione di commenti, sostituendo lib jquery locale con Google api ecc)

utilizzare un file batch per chiamare il programma su tutti i file con un'estensione specifica nella directory del progetto in questo modo:

java -jar yuicompressor-2.4.2.jar -o temp\css\one-compressed.css temp\css\one.css 
replace -quotes \q -srcdir temp\ -fname "*.php" -find "<script type=\qtext/javascript\q src=\qjs/jquery.js\q></script>" -replace "<script src=\qhttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\q type=\qtext/javascript\q></script>" 

e così via.

Finora, non sono stato in grado di trovare alcun valido strumento per l'offuscamento. Ma questi due da soli rendono il compito di minimizzazione e compressione automatizzato e molto più semplice.