Minify an Entire Directory While Keeping Element/Style/Script Relationships?

Question

Do any solutions currently exist that can minify an entire project directory? More importantly, do any solutions exist that can shorten classnames, id's, and keep them consistent throughout all documents?

Something that can turn this:

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 This:

Index.html ---

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

Styles.css ---

.a{background-color:#000;}

Index.js ---

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

Plausive

Wait a minute -- didn't there use to be a bounty for this question? Who got it? – Entanglement

Seriously -- I can see that the bounty was subtracted from your account, but none of the answerers got it ?? Is there a bug in SO??? – Entanglement

Jens, I noticed that too...The SOFlow Black Hole ate my rep! :) – Plausive

Did you ever get a good answer to this? Meaning a pointer to a tool that actually does this. – Thundersquall

Answer 1

What you're looking for isn't minifying, but compression. Minifying by definition only removes whitespace, since shortening identifiers alters the interface, potentially breaking external scripts that depend on it. For this reason, minifying is inherently 'safer' than compression, although in a closed system (ie. an encapsulated web app), compression can be a good idea.

For Javascript, most people use the YUI Compressor or Dean Edwards' Packer.

For CSS, there are plenty of tools for 'optimizing' the styles, but I don't know of any that shorten class names as well. The reasons for this could be several:

1. To compress a CSS file, the script would need to know all HTML files that include it, in order to change the class and id references within them. Depending on your web site's size and structure, his could be non-trivial.
2. After compression, semantic HTML becomes less readable, as <span class="image_caption"> turns into <span class="a12">, or worse yet, <p id="a12">.

It would definitely be possible to do something like what you describe (and I'm actually working on a personal CMS/framework that will), but for it to be maintainable, it would probably have to be an integrated part of a tightly structured CMS, compressing all files 'behind the scenes' whenever a new change is published, while keeping all the original files so the site can be maintained as a whole.

Entanglement

Answer 2

I use http://www.w3compiler.com/ which does Compression and Obfuscation

Dowitcher

This looks very similar to what I'm seeking. If only it could shorten classnames, id's, javascript variable names, etc. – Plausive

It does shorten javascript variables (I think there is an option you have to Check) I used to use cdburnerxp.se/cssparse/css_optimiser.php?lang=en for CSS compression, but I found it was too aggressive and broken things - however, have looked at it recently – Dowitcher

Answer 3

I use YUICompressor for minifying my css and js files, and a program called replace to do custom replacement of strings in html(removing comments, replacing local jquery lib with google api etc.)

Use a batch file to call the program on all the files with a specific extension in your project directory like so:

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>"

and so on.

So far, I haven't been able to find any good tool for obfuscation. But these two alone make the task of minification and compression automated and much easier.

Backwoodsman