合并和缩小多个CSS/JS文件

Question

我试图通过合并和压缩CSS和JS文件来优化网站性能.我的问题更多的是关于如何实现这一目标的(具体)步骤,考虑到我所面临的真实情况(尽管如此,应该是其他开发人员中的典型情况).

我的页面引用了几个CSS和JS文件,如下所示:

<!--
  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>

对于生产版本,我想将3个CSS文件合并为一个并使用例如YUI Compressor缩小它.但是,我需要更新所有需要这3个文件的页面来引用新近缩小的CSS.这似乎容易出错(例如,您正在删除并在许多文件中添加一些行).还有其他风险较小的方法吗？JS文件也存在同样的问题.

Answer 1

查看minify - 它允许您将多个js,css文件合并为一个,只需将它们堆叠成一个URL,例如

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

我们已经使用它多年了,它做得很好并且即时完成(无需编辑文件).

Answer 2

我认为YUI压缩机是最好的.它缩小了JS和CSS,甚至删除了console.log人们用于低级JavaScript调试的语句.

看看它有多容易.

您可以在ant任务中启动它,因此如果您使用svn/git,则将其包含在post/pre commit钩子中.

更新:现在我使用grunt与concat,minify和uglify贡献.您可以将它与观察者一起使用,以便在您更改源时在后台创建新的迷你文件.uglify contrib不仅剥离控制台日志,还剥离未使用的函数和属性.

有关简要介绍,请参阅本教程.

更新: 现在人们退出grunt和它的前任"gulp"并使用npm作为构建工具.在这里阅读它.

Answer 3

我需要更新需要这3个文件的所有页面来引用新缩小的CSS.

首先我要说你应该有共同的标题.因此,无论何时需要,都不需要随时更改所有标头.单头或2-3是一个好习惯.因此,当您的页面需要时,您可以更改标题.因此,无论何时您想扩展您的网络应用程序,它都会降低风险和繁琐.

你没有提到你的开发环境.您可以看到为不同的环境列出了许多压缩工具.而你正在使用好的工具ieYUI Compressor.

Answer 4

我最终使用CodeKit来连接我的CSS和JS文件.我觉得非常有用的功能是能够在文件保存时进行连接; 因为它监视各自的CSS/JS资产.一旦我将它们正确组合到例如1个CSS和1个JS文件中,所有其他文件就可以参考这些2.

您甚至可以要求CodeKit进行即时缩小/压缩.

免责声明:我与CodeKit没有任何关联.我在网上随机发现它,它在我的开发过程中一直是一个很好的工具.自从我一年多以前第一次使用它以来,它也提供了很好的更新.

Answer 5

Windows用户的快速提示,如果您只想连接文件:

在所需位置打开cmd,然后使用" type " 将文件传输到文件

例如:

type .\scripts\*.js >> .\combined.js

如果脚本的顺序很重要,则必须按所需顺序显式键入文件.

我在bat文件中使用它来处理我的angular/bootstrap项目

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

Answer 6

这是2015年的街头和最简单的方式imo使用gulp - http://gulpjs.com/.使用gulp - uglify 为js脚本和gulp - minify -css为css 缩小代码非常简单. Gulp绝对值得一试

Answer 7

我没有看到你提到内容管理系统(Wordpress,Joomla,Drupal等),但如果你使用任何流行的CMS,他们都有可用的插件/模块(免费选项),将缩小和缓存你的CSS和js.

使用插件使您能够保持未压缩的版本可供编辑,然后在进行更改时,插件会自动包含您的更改并重新压缩文件.只要确保你选择一个允许你排除文件(例如自定义js文件)的插件,它就会破坏任何东西.

我过去曾尝试手动保存这些文件,它总是变成维护噩梦.祝你好运,希望这有帮助.

Answer 8

对于那些想要更轻巧,更灵活的人,我今天创建了js.sh来解决这个问题.它是一个针对JS文件的简单命令行工具,可以轻松修改以处理CSS文件.优点:

• 可轻松配置以供项目中的多个开发人员使用
• 按照script_order.txt中指定的顺序组合JS文件
• 使用Google的Closure Compiler压缩它们
• 尽可能将JS拆分为<25kb块,因为iPhone不会缓存大于25kb的任何内容
• 生成一个带有<script>标记的小PHP文件,您可以在适当的位置包含这些标记
• 用法: js.sh -u yourname

它可以使用一些改进,但它对我的用例比我到目前为止看到的所有其他解决方案更好.