组合和缩小多个CSS / JS文件 [英] Combine and Minify Multiple CSS / JS Files

问题描述

我想通过整合和压缩CSS和JS文件来优化网站性能。我的问题是更多关于如何实现这一点的具体步骤，考虑到我面临的一个真实情况（应该是其他开发商也是典型的）。

我的页面引用几个CSS和JS文件，如下所示：

 <！ -  
较小的文件。 
因此，多个CSS和JS文件。 
  - > 
< link type =text / css =stylesheethref =/ css / main.css/> 
< link type =text / css =stylesheethref =/ css / secondary-1.css/> 
< link type =text / css =stylesheethref =/ css / secondary-2.css/> 
 
< script type =text / javascriptsrc =/ scripts / js / main.js>< / script& 
< script type =text / javascriptsrc =/ scripts / js / adapter / adapter.js>< / script& 
< script type =text / javascriptsrc =/ scripts / js / adapter / title-adapter.js>< / script& 
 

对于生产版本，我想将3个CSS文件合并为一个并将其缩小例如 YUI Compressor 。但是，然后，我需要更新所有需要这3个文件的页面，以引用新近CSS。这看起来容易出错（例如，你在许多文件中删除和添加一些行）。任何其他低风险的方法？

解决方案

我最终使用了 CodeKit 来连接我的CSS和JS文件。我发现真正有用的功能是在文件保存时执行连接的能力;因为它监视相应的CSS / JS资产。一旦我得到他们正确组合到1个CSS和1个JS文件，所有其他文件可以简单地引用这两个。

你甚至可以要求CodeKit做即时缩小/压缩。 / p>

免责声明：我不以任何方式与CodeKit关联。我随机在网上找到它，它在我的开发过程中作为一个伟大的工具。自从我在一年多前使用它以来，它也有好的更新。

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).

My page references several CSS and JS files like the following:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. YUI Compressor. 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.

解决方案

I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.

You can even ask CodeKit to do on-the-fly minification / compression.

Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.

这篇关于组合和缩小多个CSS / JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！