如何在不同网页的文件组中自动化Javascript组合和缩小

How to automate Javascript combining and minification, in groups of files for different webpages?

本文关键字：自动化 Javascript 组合 缩小 文件 网页      更新时间：2023-09-26

假设我的页面结构是：

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(包括一个最小化器，如谷歌闭包编译器/YUI压缩器。

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

其中大部分。但是它对我来说有以下缺点：

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(相结合，其中大部分是可行的，但我正在寻找一个开发良好的可配置解决方案，我可能错过了(

更新以显示缩小示例

使用缩小似乎确实可行。我不确定您是否尝试过这个，但把它放在那里给可能需要它的其他任何人

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

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

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

3(对于每个组，您将在临时文件夹中找到2个文件，命名为：

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 和压缩。

我自己的项目很像你的;带有外部和实习 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 文件也被"粉碎"以减小其大小。

最后，上传和部署整个项目(在多个服务器的情况下(。

结论 这是很多工作，但是当它运行时，很高兴看到它工作:)

创建一个分组配置文件 (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。

咕噜声很棒。 如果这不起作用，请尝试盒式磁带：http://getcassette.com/

相关文章：