Question

我有一个网站，它使用了大量的jquery / javascript。现在，在索引页面，我有大约10个javascript文件包含在头部：

<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery_plugin_1.js"></script>
<script src="/js/jquery_plugin_2.js"></script>
<script src="/js/jquery_plugin_3.js"></script>
<script src="/js/my_scripts_1.js"></script>
<script src="/js/my_scripts_2.js"></script>
<script src="/js/my_scripts_3.js"></script>
<script src="/js/my_scripts_4.js"></script>
<!-- ...and so on -->
</head>

由于访客数量越来越大，我开始考虑所有这些的表现。我已经读过，最好将所有javascript文件缩小并合并在一起，这样浏览器必须只发出一个HTTP请求。我这样做了。现在我有everything.js文件包含所有javascript，包括jquery，插件和我的自定义脚本。

<head>
<!--
<script src="/js/jquery.js"></script>
<script src="/js/jquery_plugin_1.js"></script>
<script src="/js/jquery_plugin_2.js"></script>
<script src="/js/jquery_plugin_3.js"></script>
<script src="/js/my_scripts_1.js"></script>
<script src="/js/my_scripts_2.js"></script>
<script src="/js/my_scripts_3.js"></script>
<script src="/js/my_scripts_4.js"></script>
...
-->
<script src="/js/everything.js"></script>
</head>

当我需要对其中一个文件进行更改时，乐趣就开始了。每次，为了检查我的更改是否按预期工作，我需要压缩文件并更新everything.js或取消注释所有旧代码。通过这种工作流程，很容易忘记某些事情并犯错误。

问题：是否存在可以解决这一问题的自动化问题？还有什么东西可以让我按照以前的方式编辑单独的文件，当我准备好测试我的更改时，它会缩小并整合所有内容？

我正在使用PHP5和SVN

解

感谢大家的帮助，我找到了解决方案：我将在我的SVN仓库中放置一个post-commit钩子，它将获取所有.js个文件，将它们放在一起并使用YUI压缩器缩小它们。然后，在我的脚本中我将分叉javascript包含，这样在开发环境中该站点将包含单独的javascript文件，但在生产中将包含组合和缩小的文件。

Answer 1

我们有自定义部署脚本来处理它。简而言之，它使用YUI Compressor缩小所有CSS和JavaScript文件，并将它们打包到最多两个文件中，一个是通用文件，另一个文件是给定页面的特定逻辑。完成后，我们创建一个符号链接（或一个新文件夹，具体取决于项目）到包含文件的文件夹，并立即传播新的更改。除了开发之外，所有环境都使用此方法。

在缩小之前，这就是CSS结构的样子（它或多或少与JavaScript相同，只是为了给你一个想法）：

css/Layout/Core/reset.css
css/Layout/Core/index.css
css/Layout/Tools/notice.css
css/Layout/Tools/form.css
css/Layout/Tools/overlay.css
css/Skin/Default/Core/index.css
css/Skin/Default/Tools/notice.css
css/Skin/Default/Tools/form.css
css/Skin/Default/Tools/overlay.css
css/Layout/Tools/gallery.css
css/Layout/Tools/comments.css
css/Layout/Tools/pagination.css
css/Layout/Index/index.css
css/Skin/Default/Tools/gallery.css
css/Skin/Default/Tools/comments.css
css/Skin/Default/Tools/pagination.css
css/Skin/Default/Tools/achievements.css
css/Skin/Default/Tools/labels_main.css
css/Skin/Default/Index/index.css

后：

minified/1290589645/css/common.css
minified/1290589645/css/0135f148a7f6188573d2957418119a9a.css

我们喜欢这种方法，因为它不需要动态处理任何其他代码。这只是一个部署问题，每两周发生一次。我们的登台环境每天更新，有时甚至每天更新一次，我们还没有遇到任何问题。

Answer 2

我认为你应该检查你的脚本在一个文件中是否正常工作然后压缩该文件。我们没有很多文件，因此我们使用yui compressor为每个文件使用js minifier。如果您使用自动部署，则应执行缩小和部署，否则批处理脚本应该没问题。

Answer 3

老实说我之前没有这样做过，但我遇到了这两个解决方案并认为它们可能对你有所帮助：

jMerge

Automatic merging and versioning of CSS/JS files with PHP

祝你好运！

Answer 4

创建一个这样的php文件并将其保存为js目录中的merger_js.php

<?php
ob_start ("ob_gzhandler");
$f=$_GET['f'];
if(@file_exists($f)){
    $inhoud = file_get_contents($f);
    header("Content-type: application/javascript; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
}else{
// file not found, we return empty
 $inhoud= "";
}
print $inhoud;

像这样调用你的java

<script type='text/javascript' src='js/merger_js.php?f=blackcan.js'></script>

现在您的javascript文件已压缩发送到浏览器。确保服务器可以处理gzip（通常默认安装）

希望这有帮助

Javascript缩小自动化

4 个答案: