title: Minify an Entire Directory While Keeping Element/Style/Script Relationships?
body: <p>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?</p>
  
  <p><strong>Something that can turn this:</strong></p>
  
  <p>Index.html ---</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="fooBar"&gt;
    &lt;!-- Code --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styles.css ---</p>
  
  <pre class="lang-css prettyprint-override"><code>.fooBar { 
    // Comments and Messages
    background-color: #000000; 
  }
  </code></pre>
  
  <p>Index.js ---</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".fooBar").click( function () { 
    /* More Comments */
    alert( "fooBar" ); 
  });
  </code></pre>
  
  <p><strong>Into This:</strong></p>
  
  <p>Index.html ---</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="a"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Styles.css ---</p>
  
  <pre class="lang-css prettyprint-override"><code>.a{background-color:#000;}
  </code></pre>
  
  <p>Index.js ---</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".a").click(function(){alert("fooBar");});
  </code></pre>