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

我正在尝试通过合并和压缩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文件也有同样的问题。

签出minify-它允许您将多个js，css文件组合到一个URL中，例如，将它们组合为一个

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

我们已经使用了多年，它的工作非常出色，并且可以即时运行（无需编辑文件）。

我认为YUI Compressor是最好的。它最小化了JS和CSS，甚至剥离了console.log人们用于底层JavaScript调试的那些语句。

看看这有多容易。

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

更新：如今，我对concat使用grunt，将贡献最小化并缩小。您可以将其与观察程序一起使用，以便在您更改源时在后台创建新的缩小文件。uglify贡献不仅剥离控制台日志，而且剥离未使用的功能和属性。

请参阅本教程以获取简要了解。

更新： 如今，人们不再关注它的前身“ gulp”，而是将npm用作构建工具。在这里阅读。

更新： 所以现在人们使用yarn运行npm。难怪; 纱线图标是一只猫。当前大多数框架都使用webpack将资源捆绑到包中，然后还要注意缩小问题。

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

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

您没有提到您的开发环境。您可以看到针对不同环境列出了许多压缩工具。而且您正在使用好的工具，即YUUI Compressor。

我最终使用CodeKit连接了我的CSS和JS文件。我发现真正有用的功能是可以在保存文件时进行串联；因为它监视相应的CSS / JS资产。一旦将它们正确组合到例如1个CSS和1个JS文件中，所有其他文件都可以简单地引用这2个文件。

您甚至可以要求CodeKit快速进行缩小/压缩。

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

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

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

例如：

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

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

我用这一个bat文件为我的角/引导项目

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

据2015年一年的街道和国际海事组织正在使用一饮而尽最简单的方法- http://gulpjs.com/。使用js脚本的gulp - uglify 和css的 gulp - minify -css来简化代码非常简单。 Gulp绝对值得一试

我没有看到您提到内容管理系统（Wordpress，Joomla，Drupal等），但是如果您使用任何流行的CMS，它们都具有可用的插件/模块（还有免费选项），这些插件/模块将最小化并缓存您的CSS和js。

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

过去，我曾尝试过手动保留这些文件，但这总是成为维护的噩梦。祝您好运，希望对您有所帮助。

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

• 易于配置，以供项目中的多个开发人员使用
• 按照script_order.txt中指定的顺序合并JS文件
• 使用Google的Closure编译器压缩它们
• 由于iPhone不会缓存大于25kb的内容，因此将JS尽可能分成<25kb的块
• 生成带有<script>标签的小型PHP文件，您可以在适当的位置添加标签
• 用法： js.sh -u yourname

它可能会进行一些改进，但是对于我的用例来说，它比到目前为止我看到的所有其他解决方案都更好。

优化的第一步是文件最小化。（我强烈建议GULP进行最小化和优化。其简单的监视解决方案，安装和所有文件都可以立即压缩。支持所有CSS，JS，less，sass等。）

或老派解决方案：

1）通常，作为优化过程，要优化站点性能，请尝试将所有CSS合并到一个文件中，然后使用Compass压缩文件。这样，您对静态CSS的多个请求将被替换为一个。

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

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

3）尝试使用工具，如 萨斯，指南针，少给你减少CSS。

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

我希望这有帮助！

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

因此，首先，从命令行中找出如何合并和缩小文件（YUICompressor文档涵盖了此内容）。为自动生成的内容指定一个目录，该目录与您正在处理但可以访问的Web服务器分开，并输出到该目录，例如gen / scripts / combined.js。将您使用的命令放入Makefile中，并在每次更改并希望更改生效时重新运行“ make”。然后更新其他文件中的标题以指向合并和缩小的文件。

在我的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 %}

开发版本准备好投入生产后，我将使用此脚本合并所有css文件并替换的内容min.css。

但是，仅当所有页面中都包含相同的CSS文件时，此解决方案才有效。

您可以使用由著名的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);

在这里可以找到所有更快的实用程序

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json