title: Combine and Minify Multiple CSS / JS Files
body: <p>I am trying to optimize a site performance by consolidating and compressing the CSS and JS files. My question is more about the (concrete) steps on how to achieve this, given a real situation I was facing (should be typical among other developers too, though).</p>
  
  <p>My page references several CSS and JS files like the following:</p>
  
  <pre><code>&lt;!--
    It's easier to work on smaller files during development.
    Hence, the multiple CSS and JS files.
  --&gt;
  &lt;link type="text/css" rel="stylesheet" href="/css/main.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="/css/secondary-1.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="/css/secondary-2.css" /&gt;
  
  &lt;script type="text/javascript" src="/scripts/js/main.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/scripts/js/adapter/adapter.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a>. But then, I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS. This seems error-prone (e.g. you're removing and adding some lines in many files). Any other less-risky approach? The same issue for the JS files.</p>