合并和缩小多个 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 Compressor 是最好的。它缩小了 JS 和 CSS，甚至去除了人们用于低级 JavaScript 调试的那些 console.log 语句。

Check out how easy it is.

如果你使用 svn/git，你可以在 ant 任务中启动它，因此将它包含到你的 post/pre-commit 钩子中。

更新： 现在我将 grunt 与 concat、minify 和 uglify 贡献一起使用。您可以将它与观察者一起使用，以便在您更改源时在后台创建新的缩小文件。 uglify contrib 不仅会去除控制台日志，还会去除未使用的函数和属性。

请参阅this tutorial 了解简要信息。

更新： 如今，人们从 grunt 及其前身“gulp”中退了出来，并使用 npm 作为构建工具。阅读它here。

更新： 所以现在人们使用yarn 来运行npm。难怪;纱线图标是一只猫。 大多数当前框架使用webpack 将资源捆绑到包中，然后由minification 处理。

Answer 3

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

首先我会说你应该有共同的标题。所以它不需要在任何时候都改变所有的标题。最好使用单头或 2-3。因此，当您的页面需要时，您可以更改标题。因此，无论何时您想扩展您的网络应用程序，它都会降低风险和繁琐。

您还没有提到您的开发环境。你可以看到有many compressing tools listed for different environments。而且您正在使用好工具，即 YUI Compressor。

Answer 4

我没有看到您提到内容管理系统（Wordpress、Joomla、Drupal 等），但如果您使用任何流行的 CMS，它们都有可用的插件/模块（也有免费选项），可以缩小和缓存您的 css 和js.

使用插件使您能够保持未压缩版本可供编辑，然后在进行更改时，插件会自动包含您的更改并重新压缩文件。只要确保您选择了一个插件，它可以让您排除文件（例如自定义 js 文件），以防它破坏任何东西。

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

Answer 5

如果您对所提供的文件进行任何预处理，您可能需要设置一个适当的构建系统（例如 Makefile）。这样，您就有了一些没有重复的源文件，并且每当您进行更改时，您都会运行“make”，它会更新所有自动生成的文件。如果已经有一个构建系统，请了解它的工作原理并使用它。如果没有，您需要添加一个。

首先，弄清楚如何从命令行组合和缩小文件（YUICompressor 文档涵盖了这一点）。为自动生成的东西指定一个目录，与你工作的东西分开，但 Web 服务器可以访问，然后输出到那里，例如 gen/scripts/combined.js。将您使用的命令放入 Makefile，并在每次进行更改并希望它生效时重新运行“make”。然后更新其他文件中的标题以指向合并和缩小的文件。

Answer 6

我最终使用CodeKit 连接我的 CSS 和 JS 文件。我发现真正有用的功能是能够在文件保存时进行连接；因为它监控各自的 CSS / JS 资产。一旦我将它们正确组合，例如到1个CSS和1个JS文件，其他文件都可以参考这2个。

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

免责声明：我与 CodeKit 没有任何关系。我在网上随机找到了它，它在我的开发过程中成为了一个很棒的工具。自从我一年多前第一次使用它以来，它还提供了很好的更新。

Answer 7

对于那些想要更轻量和更灵活的东西的人，我今天创建了js.sh 来解决这个问题。这是一个针对 JS 文件的简单命令行工具，可以轻松修改以处理 CSS 文件。好处：

• 易于配置，供多个开发人员在一个项目中使用
• 按照 script_order.txt 中指定的顺序组合 JS 文件
• 使用 Google 的 Closure Compiler 压缩它们
• 尽可能将 JS 拆分为
• 生成一个带有 <script> 标记的小型 PHP 文件，您可以在适当的地方包含该标记
• 用法：js.sh -u yourname

它可以进行一些改进，但对于我的用例来说，它比我迄今为止看到的所有其他解决方案都要好。

Answer 8

优化的第一步是文件最小化。 （我强烈推荐GULP进行最小化和优化。它的简单watch解决方案，安装和所有文件一次压缩。支持所有CSS，JS，less，sass等...）

或者老派的解决方案：

1) 一般来说，作为一个优化过程，为了优化站点性能，可以尝试将所有 CSS 合并到一个文件中，并使用Compass 压缩文件。这样，您对静态 CSS 的多个请求将被替换为单个请求。

2) 您可以使用 CDN（或 Google 托管库）解决多个 JS 的问题，因此请求会转到其他服务器而不是您的服务器。这样服务器在发送下一个之前不会等待上一个请求完成。

3) 如果您有自己的本地存储的 JavaScript，请使用 Brackets 插件“压缩 JavaScript”最小化每个文件。基本上一键压缩 JavsScript。Brackets 是为 CSS 和 JS 制作的免费编辑器，但可用于 PHP 和其他语言。有很多插件可供前端和后端开发人员选择。一般来说，“一键”可以完成所有这些（到目前为止是多个）命令。顺便说一句，括号取代了我非常昂贵的 Dreamweaver ;)

3) 尝试使用Sass、Compass、less 等工具来最小化 CSS。

注意：即使不使用 SASS 混合或变量，您的 CSS 也会被压缩（只需简单地使用纯 CSS 和 Compass“watch”命令将为您压缩它）。

我希望这会有所帮助！

Answer 9

在我的 symfony 项目中，我做了这样的事情

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

当dev版本准备好生产时，我使用this script合并所有css文件并替换min.css的内容。

但这个解决方案只有在所有页面中都包含相同的 css 文件时才有效。

Answer 10

现在是 2015 年，imo 使用 gulp 最简单的方法 - http://gulpjs.com/。 使用 gulp-uglify 压缩 js 脚本和 gulp-minify-css 压缩 css 的代码非常简单。 Gulp 绝对值得一试

Answer 11

您可以使用由著名的 YUI 压缩器构建的 cssmin 节点模块

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

Answer 12

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

在所需位置打开一个 cmd，然后使用“type”将文件通过管道传输到文件

例如：

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

如果您的脚本顺序很重要，您必须按所需顺序明确键入文件。

我在 bat 文件中为我的 angular/bootstrap 项目使用 this

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