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

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

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

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

我的页面引用了几个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>

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.

对于产品发布，我想将这3个CSS文件合并到一个文件中，并使用YUI压缩器来缩小它。但是，我需要更新所有需要这3个文件的页面，以引用新缩小的CSS。这看起来很容易出错(例如，您正在删除并在许多文件中添加一些行)。其他低风险的方法吗?JS文件也有同样的问题。

13 个解决方案

#1

Check out minify - it allows you combine multiple js, css files into one just by stacking them into a url, e.g.

查看minify——它允许你将多个js、css文件叠加到一个url中。

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

We've used it for years and it does a great job and does it on the fly (no need to edit files).

我们已经使用它很多年了，它做得很好，而且是动态的(不需要编辑文件)。

#2

I think the YUI Compressor is the best there is. It minifies JS and CSS and it even strips those console.log statements people use for low-level JavaScript debugging.

我认为YUI的压缩机是最好的。它缩小了JS和CSS，甚至还剥离了这些控制台。用于低级JavaScript调试的日志语句。

Check out how easy it is.

看看这有多简单。

You can start it in an ant task and therefore incude it into your post/pre commit hooks if you use svn/git.

您可以在一个ant任务中启动它，因此如果使用svn/git，那么将它嵌入到您的post/ precommit钩子中。

UPDATE: Nowadays i use grunt with the concat, minify & uglify contributions. You can use it with a watcher so it creates new minifed files in the background whenever you change your source. The uglify contrib not only strips console logs, it also strips unused functions and properties.

更新:现在我使用的是与concat的grunt, minify和uglify的贡献。您可以使用它与一个监视程序，以便每当您更改源文件时，它在后台创建新的微型文件。uglify的设计不仅带出了控制台日志，而且还剥离了未使用的功能和属性。

See this tutorial for a brief insight.

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

UPDATE: Nowadays people step back from grunt und its predecessor "gulp" and use npm as a build tool. Read up on it here.

更新:现在人们从咕哝和它的前身“咕哝”退一步，使用npm作为构建工具。在这里读一下。

#3

I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS.

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

Firstly I would say you should have common header. So it will needn't to change all headers at all time whenever necessary. It's good practice to have single header or 2-3. So as your page need you can change your header. So whenever you want to extend your web-app it will be less risky and tedious.

首先，我认为你应该有一个共同的标题。因此，它不需要在任何必要时随时更改所有标题。只有一个头或者2-3个头是很好的练习。所以当你的页面需要你可以改变你的标题。因此，无论何时你想要扩展你的网络应用程序，它都将是更少的风险和乏味。

You havn't mentioned your development environments. You can see there are many compressing tools listed for different environments. And you are using good tool i.e.YUI Compressor.

您没有提到您的开发环境。您可以看到为不同的环境列出了许多压缩工具。你使用了很好的工具。YUI Compressor。

#4

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.

最后我使用CodeKit将我的CSS和JS文件连接起来。我发现真正有用的特性是能够在文件保存时进行连接;因为它监视各自的CSS / JS资产。一旦我将它们正确地组合在一起，例如1个CSS和1个JS文件，所有其他文件都可以引用这2个。

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

你甚至可以要求CodeKit进行动态缩小/压缩。

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.

免责声明:我与CodeKit没有任何关联。我在网上偶然发现了它，它在我的开发过程中是一个很好的工具。它也有很好的更新，因为我在一年多以前第一次使用它。

#5

It's 2015 year in the street and the easiest way imo is using gulp - http://gulpjs.com/. Minifying code using gulp-uglify for js scripts and gulp-minify-css for css is very simple. Gulp is definitely worth of trying

今年是2015年，国际海事组织使用gulp的最简单方式是http://gulpjs.com/。对js脚本使用gulp-uglify和对css使用gulp-minify-css的代码非常简单。喝一口绝对值得一试

#6

Quick tip for windows users, if you only want to concat files:

给windows用户的快速提示，如果你只想要concat文件:

Open a cmd at the desired place, and just pipe your files to a file using "type"

在需要的地方打开一个cmd，然后使用“type”将文件传输到一个文件

ex:

例:

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

If the order of your scripts is important, you have to explicitly type the files, in the desired order.

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

I use this in a bat file for my angular/bootstrap projects

我在一个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

#7

I dont see you mention a content management system (Wordpress, Joomla, Drupal, etc) but if you are using any popular CMS they all have plugins/modules available (free options as well) that will minify and cache your css and js.

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

Using a plugin gives you the ability to keep the uncompressed versions available for editing, then when changes are made the plugin automatically includes your changes and re compresses the file. Just make sure you choose a plugin that will let you exclude files (such as a custom js file) incase it breaks anything.

使用插件使您能够保留未压缩版本供编辑，然后当做出更改时，插件将自动包含您的更改并重新压缩文件。只要确保您选择了一个插件，它将允许您排除文件(比如一个定制的js文件)，以防它破坏任何东西。

I have tried in the past to keep these files up manually and it always turns into a maintenance nightmare. Good luck, hope this helped.

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

#8

For people who want something a little more lightweight and flexible, I created js.sh today to address this problem. It's a simple command line tool targeted toward JS files that could easily be modified to take care of CSS files too. Benefits:

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

Easily configurable for use by multiple developers on a project
易于配置，供多个开发人员在项目上使用
Combines JS files in the order specified in script_order.txt
按照script_order.txt中指定的顺序组合JS文件
Compresses them with Google's Closure Compiler
使用谷歌的闭包编译器压缩它们
Splits JS into <25kb chunks where possible since the iPhone won't cache anything greater than 25kb
如果可能的话，将JS分割成小于25kb的块，因为iPhone不会缓存大于25kb的内容
Generates a small PHP file with <script> tags that you can include where appropriate
生成一个带有
Usage: js.sh -u yourname
用法:js。sh - u yourname

It could use some improvements, but it's better for my use case than all of the other solutions I've seen so far.

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

#9

First step of optimization is file minimization. (I strongly recommend GULP for minimization and optimization. Its simple watch solution, installation and all files are compressed at once.Supports all CSS, JS,less, sass, etc...)

优化的第一步是文件最小化。(我强烈推荐GULP进行最小化和优化。它的简单监视解决方案、安装和所有文件都被同时压缩。支持所有CSS, JS,less, sass等)

OR Old school solution:

或旧学校的解决方案:

1) In general, as a process of optimization, to optimize a site performance, try merging all CSS in one file and compress file by using Compass. That way your multiple requests to static CSS will be replaced with single one.

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

2) Problem of multiple JS you can resolve by using CDN (or Google Hosted Libraries) so requests go to other server not yours. That way server doesn't wait for previous request to complete before sending next.

2)您可以通过使用CDN(或谷歌托管库)来解决多个JS的问题，从而将请求发送到其他服务器而不是您的服务器。这样服务器就不会在发送下一个请求之前等待先前的请求完成。

3) If you have your own locally stored JavaScript minimize each file by using Brackets plugin "Compress JavaScript". It's basically one click to compress JavsScript.Brackets is free editor made for CSS and JS but can be used for PHP and other languages. There is plenty of plugins to choose made for both front-end and back-end developers. In general "one click" to do all these (so far multiple) commands. Btw, Brackets replaced my very expensive Dreamweaver ;)

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

3) Try using tools like Sass, Compass, less to minimize you CSS.

3)尝试使用Sass、Compass等工具，减少CSS的使用。

Note: Even without using SASS mixing or variables your CSS will be compressed (just simple use pure CSS and Compass "watch" command will compress it for you).

注意:即使不使用SASS混合或变量，您的CSS也会被压缩(只需使用纯CSS和指南针“watch”命令就可以为您压缩)。

I hope this helps!

我希望这可以帮助!

#10

If you're doing any pre-processing on the files you serve, you probably want to set up a proper build system (eg a Makefile). That way, you have some source files with no duplication, and whenever you make a change, you run 'make' and it brings all the automatically-generated files up to date. If there is already a build system in place, learn how it works and use it. If not, you'll need to add one.

如果您正在对您所服务的文件进行预处理，您可能希望建立一个适当的构建系统(如Makefile)。这样，您就有了一些没有重复的源文件，每当您进行更改时，您就运行“make”，它将自动生成所有最新的文件。如果已经有了一个构建系统，那么学习它是如何工作和使用它的。如果没有，您需要添加一个。

So first, figure out how to combine and minify your files from the command line (the YUICompressor documentation covers this). Designate a directory for automatically-generated stuff, separate from the stuff you work on but accessible to the web server, and output to there, eg gen/scripts/combined.js. Put the commands you used into a Makefile, and rerun 'make' every time you've made a change and want it to take effect. Then update the headers in other files to point to the combined and minified files.

因此，首先，从命令行(YUICompressor文档对此进行了介绍)找出如何合并和缩小文件的方法。为自动生成的内容指定一个目录，与您工作的内容分开，但是可以访问web服务器，并输出到那里，例如gen/scripts/组合。将您使用的命令放入Makefile中，并在每次进行更改并希望其生效时重新运行“make”。然后更新其他文件中的头文件，指向合并和缩小的文件。

#11

In my symfony project I do something like this

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

When the dev version is ready for production, I use this script to combine all css files and replace the contents of min.css.

当开发版本准备好用于生产时，我使用这个脚本将所有css文件组合起来，并替换min.css的内容。

But this solution works only if the same css files are included in all pages.

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

#12

You can use the cssmin node module which is built from the famous YUI compressor

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

$ 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);

#13

All quicker utilities are found here

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

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

#1