有人可以解释我如何组合我的 JS 和 CSS 文件吗？答案

【问题标题】：Could someone explain how I can combine my JS and CSS files?有人可以解释我如何组合我的 JS 和 CSS 文件吗？
【发布时间】：2013-05-25 23:55:36
【问题描述】：

我已经完成了关于结合 JS 和 CSS 文件的研究。说到这一切，我还是个新手，所以像 Github 和 Google 上的一些缩小和编译器这样的解释在普通英语中并没有真正的意义。

我有以下 CSS 文件：

引导
bootstrap-min
引导响应
bootstrap-responsive-min
主要
漂亮的照片

这些是我的 JS 文件：

引导
bootstrap.min
jquery
jquery.prettyPhoto
jquery-migrate-1.2.1
主题

我应该使用哪个工具，如果有人可以逐步解释，那就太好了。

【问题讨论】：

这里的“组合”到底是什么意思？

标签： javascript css minify

【解决方案1】：

如果您只想拥有一个大的 js 和 cs 文件，那么您可以通过一个接一个地复制和粘贴每个文件的内容来将它们组合成一个，按照您将它们包含在页面上的相同顺序。请记住，如果您在其后包含 bootstrap.min 文件，则不需要 bootstrap。这是同一个文件，只有名称中带有 .min 的文件是它的缩小版。 js 文件也是如此。

然后，如果您愿意...您可以运行这样的压缩工具： http://refresh-sf.com/yui/

并希望一切正常。

【讨论】：

感谢您的回答。是的，我读到了一些关于复制并粘贴到新的 CSS 和新的 JS 文件中的内容。也许我的问题是我应该使用哪个 CSS 和 JSS 作为我的主文件。现在我有 6 个 CSS 和 6 个 JS 文件。我是否应该创建一个新的 CSS 将所有内容都放在那里并将其保存为 main.css 以及 JS 文件呢？我应该将 JQUERY 视为主要还是 Bootstrap。
取决于您现在如何包含它们。如果您以与您在问题中列出它们的顺序相同的顺序包含它们（在 jquery 之前引导），则以相同的顺序组合它们。在我在回答中给您的链接上，您可以让该工具为您执行此操作（显示文件的第二个选项卡）。您上传了几个文件，它会将它们组合在一起。
好的，谢谢。只是我上传它们的顺序有很大不同吗？我认为引导程序始终是 CSS 的首选，但我不确定 JQUERY for JS。只是尝试看看它是否有效。肯定要备份文件嘿嘿。
据我所知，引导 javascript 插件需要 jquery。所以你应该在引导之前加载它。您还需要在加载它的插件（迁移和漂亮照片）之前加载 jquery。也请您接受答案吗？

【解决方案2】：

虽然合并文件很容易，但您不应该对库执行此操作。此外，在大多数情况下，您不应合并这些文件。

库往往会长时间保持不变，因此最终会被用户缓存。网站加载时间会更快。
一个好的方法是将这些库链接到第 3 方 CDN（Google、JQuery 等）。它们在负载平衡方面要好得多，这将增加您的页面加载时间。（不过，可能会有一些 DNS 查找开销）。
较大的文件往往会跳过缓存。因此，如果每次下一页调用都会再次下载库，那么拥有大文件会使您的页面显着变慢。

当然，对于您的自定义脚本加入单个文件和最小化几乎总是推荐。

【讨论】：