javascript - 如何在不同网页的文件组中自动化 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 结合使用)，我同意其中大部分是可行的，但我正在寻找一个我可能错过的完善的可配置解决方案)

Answer 1

已更新以显示缩小示例

使用 minify 看起来确实可行。我不确定您是否已经尝试过这个，但是将它放在那里以供可能需要它的其他人使用

1) Minify 可以生成脚本的组合和 gzip 压缩副本，并将其用作缓存，这样它就不需要处理所有请求的文件。要启用此功能，只需使用临时目录的位置编辑 config.php 文件

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

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

3) 对于每个组，您会在名为 temp 的文件夹中找到 2 个文件:

minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz

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

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

除非您有大量不同的配置，否则我建议您使用 YUICompressor 并部署到您的 CDN 网络。使用简单的 shell 脚本自动执行类似的操作实际上非常简单。但是，如果您的设置非常复杂，您可以考虑使用像 grunt 这样的构建工具。在 node.js 之上运行。我一直在使用 Grunt 为使用相同代码库的不同项目构建 JS 文件，并且效果很好。此外，还支持 OOTB 的 lint 和压缩。