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

Question

Do any solutions currnetly 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");});

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.

Answer 2

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

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.