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

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");});