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

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.