Javascript 将JS和CSS文件组合为构建的一部分

我想把我所有的JS文件连接到一个浏览器，当它进入我的网站。当然，在开发期间将这些文件分开仍然有价值。广泛接受的解决方案是作为构建的一部分执行连接

连接部分非常简单。。但是，对于所有仍然有一堆引用预先连接的js文件的

标记的HTML文件呢？他们现在需要指向单个连接的javascript文件

---

如何将这些引用替换为构建的一部分？

有一个名为minify的Google项目：这可能正是您要寻找的内容。

一种方法是让html只加载一个脚本，但在开发过程中，该脚本只是一个“包装器”使用该技术强制加载其他单个脚本的类型。在生产中，该脚本的内容被所有脚本的联合所取代（最好是通过一些服务器端连接）。

根据您使用的技术，您可以在html中有一个JS引用，指向一个处理程序，该处理程序将目录中的所有JS文件连接到一个JS文件中。然后，您可以在开发过程中轻松地管理各个文件，并在运行时使用一个HTTP请求。有一些插件可以压缩JS、删除空白和缓存结果，但这取决于您的技术。

您可以使用apache插件。这样可以很容易地连接文件

发件人：

致：

---

基于Ant的解决方案可能来自此示例。我将插入标准免责声明，用正则表达式“解析”HTML可能不是一个好主意

其想法是：

• 删除或将所有
  标记转换为注释
• 插入引用合并Javascript的单个
  标记

我在

结束标记之前插入了一个js，但您可以根据需要进行调整。 这里的源文件位于一个名为“dirty”的目录下；调整后的文件在一个名为“clean”的文件中

<property name="single.js" value="single.js" />
<copy todir="clean" overwrite="true">
    <fileset dir="dirty" />
    <filterchain>
        <tokenfilter>
            <replaceregex
             pattern="(&lt;)(\s*SCRIPT\s+SRC=['&quot;][^'&quot;]+['&quot;]\s*)/(&gt;)"
             replace="\1!--\2--\3"
             flags="gi"/>
            <replaceregex
             pattern="(&lt;/BODY&gt;)"
             replace="&lt;SCRIPT SRC=&quot;${single.js}&quot; /&gt;${line.separator}\1"
             flags="i"/>
        </tokenfilter>
    </filterchain>
</copy>

有一个名为的库，可以用作构建时解决方案（maven插件）或运行时解决方案（过滤器），并帮助您将所有描述的资源保存在一个位置，如下所示：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>  

/asset/*.css
/asset/*.js

这样，您可以从以下位置切换html中的所有资源引用：

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
...
<script src="script99.js">

...

到

免责声明：这是一个有偏见的答案，因为我在这个项目上工作

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>  

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
...
<script src="script99.js">

<script src="all.js">