如何自动化Javascript文件的合并和压缩以适用于不同网页组的文件？

Question

假设我的页面结构是：

1. one.html :
   includes ->   a.js , b.js , c.js ,d.js

2. two.html :
   includes ->   a.js , b.js,  x.js, y.js, z.js

3. three.html :
   includes ->   a.js , b.js, s.js,  x.js, y.js

等等。 有些页面比其他页面更受欢迎，比如说其中3个页面贡献了网站所有页面访问量的99%。

我正在寻找以下问题的解决方案：

i) 将文件组合并并最小化，以便可以包含在页面中。

ii) 具有将组的文件名映射到最终组合文件名的某种逻辑。

iii) 包括像Google Closure编译器/ YUI压缩程序这样的缩小器。

我看过的一个解决方案是： PHP minify

它实现了大部分功能。但是对于我来说，它具有以下缺点：

i) 我将在CDN服务器上托管我的静态组合文件，而不是在托管PHP minify的同一Web服务器上，因此PHP minify按组名称提供文件的逻辑对我不起作用。

ii) PHP Minify使用PHP CGI处理和服务脚本，而我希望我的缩小内容直接从CDN服务器提供。

PHP Minify是否有一些函数将组名映射到组合文件名，这样我就可以在我的网页中直接设置组合JS文件的CDN路径。例如：

<?php
  $groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>

<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>

与其调用PHP Minify的PHP脚本来获取一组文件，实际上是一个PHP页面调用，然后从之前生成的文件中提供JavaScript内容：

<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>

我同意大多数情况下可以通过结合不同的解决方案和自定义部署脚本以及压缩工具（如ANT，FABRIC + YUICompressor/ClosureCompiler）来实现，但是我正在寻找一个经过充分开发的可配置解决方案，可能我错过了一些。

- DhruvPathak

---

感谢大家的参与，但我没有找到任何回答解决这些问题，并且对我们所有人有帮助。请继续贡献。 - DhruvPathak

Answer 1

更新以展示缩小示例

使用缩小似乎是可行的。我不确定你是否尝试过这个方法，但是为了其他可能需要它的人而提出来。

1）缩小可以生成一个组合和压缩的脚本副本，并将其用作缓存，以便它无需为每个请求处理所有文件。要启用此功能，请编辑config.php文件并指定临时目录的位置。

$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';

2) 在将所有组添加到groupsConfig.php之后，只需对每个组进行请求，以便minify在缓存文件夹中生成输出文件

3) 对于每个组，在临时文件夹中找到两个文件，分别命名为：

minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz

4) 您可以将文件重命名并根据需要直接部署到CDN。

5) 如果您的CDN允许URL重写，则可以重写脚本URL以提供JS，无需更改服务的页面中的位置。

除非您有大量不同的配置，否则我建议使用YUICompressor并部署到您的CDN网络。使用简单的shell脚本实现自动化处理是相当容易的。如果您有一个非常复杂的设置，那么可以考虑使用构建工具，例如在node.js上运行的grunt。我一直在使用Grunt为具有相同代码库的不同项目构建JS文件，并且它表现得相当出色。此外，它支持OOTB的lint和压缩。

- Checksum

---

感谢您的建议。但是PHP Minify已经完成了大部分工作，我正在寻找一些增强功能以适应我的部署需求。 - DhruvPathak

Answer 2

我的项目与你的非常相似;包含外部和内部JavaScript、CSS和图像的HTML. 我也寻找现成的解决方案，但未能找到，所以我自己开发了一个。以下是我创建的系统的概述。如果您选择这条路线，希望这能给您提供一些寻找的想法。

该系统首先通过检查要部署的项目的特定版本来启动。您需要在本地文件系统路径和它们相应的远程路径之间建立一个翻译（例如CDN或Web服务器）; 在我的情况下，所有资源都从项目内的固定目录中加载。

我首先解析所有HTML模板（我有一个MVC来分离HTML和PHP代码）; 这收集了所有JavaScript、CSS和图像引用:

• HTML、JavaScript或CSS内部的图像引用将被其在CDN上的位置替换。
• 内部JavaScript和CSS使用Closure Compiler和YUI进行即时压缩。
• 连续的外部JavaScript和CSS块被替换为单个压缩代码/样式捆绑包; 捆绑包名称是文件名及其相应版本的哈希值（CDN将使用最大的到期日期服务这些文件，因此任何更改都必须导致唯一的文件名）。

然后，所有的包都被压缩、打包、保存并与任何图像一起上传到CDN以准备部署。PNG文件也会被“压缩”以减小它们的大小。

最后，整个项目被上传和部署（如果有多个服务器）。 结论 这是很多工作，但当它运行时，看到它工作得很好是非常棒的 :)

- Ja͢ck

---

感谢您的回复。但是，您主要总结了我的问题:(，我非常渴望像PHP minify这样的维护良好的现有解决方案。真的不想自己编写它。 - DhruvPathak

我想你是对的 :) 很愿意与你分享我的代码，但由于其内部性质，你仍然需要花费大量时间调整各种脚本...也许我应该将其重写为开源解决方案 =D - Ja͢ck

你将成为一名英雄，GitHub的荣耀在等待着你。 - DhruvPathak

Answer 3

创建一个分组配置文件（xml/php），其中包含用于静态HTML的分组规则。

<groupings>
    <group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
            <resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
            .
            .
            .
        </group> 
        <group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>

创建一个 PHP 脚本，读取此配置并使用 PHP minify 在组定义中指定的路径上创建分组压缩的 js/css 文件。

使用这些路径将分组文件包含到静态 HTML 文件中。 运行脚本测试您的页面，并将分组文件部署到 CDN。

- Satish N Ramteare

Answer 4

Grunt非常棒。如果不行，可以尝试使用Cassette：http://getcassette.com/

- robrich