组合和缩小多个CSS / JS文件
我正在尝试通过合并和压缩CSS和JS文件来优化网站性能。 我的问题更多的是关于如何实现这一目标的（具体）步骤，因为我正面临一个真实的情况（尽pipe在其他开发人员中应该是典型的）。
我的页面引用了几个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压缩机是最好的。 它缩小了JS和CSS，甚至去除了用于低级别JavaScriptdebugging的console.log语句。
看看它是多么容易 。
你可以在一个ant任务中启动它，因此如果你使用svn / git，则可以把它放到你的post / pre commit钩子中。
更新：现在我用concan，minify＆uglify贡献grunt。 您可以将其与观察者一起使用，以便在您更改源代码时在后台创build新的微型文件。 uglify contrib不仅可以去除控制台日志，还可以去除未使用的function和属性。
请参阅本教程以获取简要的见解。
更新：现在人们从grunt和其前身“gulp”退后一步，并使用npm作为构build工具。 在这里阅读。
我需要更新所有需要这3个文件的页面来引用新缩小的CSS。
首先我会说你应该有共同的标题。 所以在任何时候都不需要随时更改所有标题。 有一个单一的标题或2-3个是很好的做法。 所以作为你的网页需要你可以改变你的标题。 所以，只要你想延长你的networking应用程序，那么风险和繁琐程度就会降低。
你没有提到你的开发环境。 你可以看到有很多压缩工具列出了不同的环境 。 而你正在使用好的工具ieYUI压缩机。
我结束了使用CodeKit连接我的CSS和JS文件。 我发现真正有用的function是能够在文件保存时进行连接。 因为它监视各自的CSS / JS资产。 一旦我把它们正确地结合起来，例如1个CSS和1个JS文件，其他所有文件都可以参考这2个。
您甚至可以要求CodeKit进行即时缩小/压缩。
免责声明：我不以任何方式与CodeKit关联。 我随机在网上find它，它已经成为我开发过程中的一个很好的工具。 自从我第一次使用它以来，它也有了很好的更新。
这是2015年在街上和最简单的方法是使用gulp吞咽 – http://gulpjs.com/ 。 使用gulp – uglify进行js脚本和gulp – minify -css for css代码的简化非常简单。 咕嘟绝对值得一试
Windows用户的快速提示，如果你只想连接文件：
在所需的位置打开一个cmd，然后使用“ type ”将文件传输到一个文件
例如：
type .\scripts\*.js >> .\combined.js
如果脚本的顺序很重要，则必须按照所需的顺序显式键入文件 。
我在一个bat文件中使用这个angular色/引导项目
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
我没有看到你提到一个内容pipe理系统（Wordpress，Joomla，Drupal等），但如果你使用任何stream行的CMS，他们都有插件/模块可用（免费选项以及），将缩小和caching你的CSS和JS。
使用插件可让您保持未压缩的版本可供编辑，然后在更改时插件自动包含您的更改并重新压缩文件。 只要确定你select了一个插件，可以让你排除文件（如自定义的js文件），使它打破任何东西。
过去我曾尝试手动保存这些文件，并且始终成为维护的噩梦。 祝你好运，希望这有助于。
对于想要更轻量和更灵活的人来说，我今天创build了js.sh来解决这个问题。 这是一个简单的命令行工具，针对JS文件，可以很容易地修改，以照顾CSS文件。 优点：
- 轻松configuration，可供多个开发人员在项目中使用
- 按照script_order.txt中指定的顺序组合JS文件
- 用Google的Closure Compiler压缩它们
- 把JS拆分成<25kb的块，因为iPhone不会caching大于25kb的东西
- 使用
<script>标签生成一个小的PHP文件，您可以在适当的位置包含该文件 - 用法：
js.sh -u yourname
它可以使用一些改进，但对于我的用例来说，比迄今为止所见到的所有其他解决scheme都更好。
优化的第一步是文件最小化。 （我强烈build议GULP进行最小化和优化，它的简单的手表解决scheme，安装和所有文件一次压缩。支持所有CSS，JS，less，sass等）
OR老学校解决scheme：
1）一般来说，作为一个优化的过程，为了优化网站性能，可以尝试将所有的CSS合并到一个文件中，并使用Compass压缩文件。 这样你的静态CSS的多个请求将被replace为一个。
2）您可以通过使用CDN（或谷歌托pipe的图书馆）解决多个JS的问题，所以请求去其他服务器不是你的。 这样服务器不会等待先前的请求完成，然后再发送。
3）如果你有自己的本地存储的JavaScript使用Brackets插件“压缩JavaScript”来最小化每个文件。 这基本上是一个点击来压缩JavsScript。 Brackets是免费的CSS和JS编辑器，但可用于PHP和其他语言。 有很多插件可供前端和后端开发者select。 一般来说“一键”就可以完成所有这些（到目前为止多个）的命令。 顺便说一句，括号取代了我非常昂贵的Dreamweaver;）
3）尝试使用像Sass ，Compass这样的工具来减less你的CSS。
注意：即使没有使用SASS混音或variables你的CSS将被压缩（只需简单地使用纯CSS和Compass “watch”命令将为你压缩）。
我希望这有帮助！
如果您对所提供的文件进行了任何预处理，则可能需要设置适当的构build系统（例如Makefile）。 这样，你有一些没有重复的源文件，每当你做出改变，你运行“make”，它将所有自动生成的文件更新。 如果已经有了构build系统，请了解它是如何工作和使用的。 如果没有，你需要添加一个。
所以首先要弄清楚如何在命令行中组合和缩小文件（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 %}
当dev版本准备好生产时，我使用这个脚本来合并所有的css文件并replacemin.css的内容。
但是这个解决scheme只有在所有页面中都包含相同的css文件时才起作用。
您可以使用由着名的YUI压缩机构build的cssmin节点模块
$ npm -gi 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);
所有更快的工具都可以在这里find
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
