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

Question

我希望连接所有的JS文件,以减少浏览器进入我的网站时发出的HTTP请求数.当然,在开发期间保持这些文件是分开的仍然是有价值的.广泛接受的解决方案是将连接作为构建的一部分来执行.

连接部分非常简单..但是所有仍然有一堆<script src="*.js">引用预连接的js文件的标签的HTML 文件呢？他们现在需要指向单个连接的javascript文件.

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

Answer 1

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

这个想法是：

• 删除所有<script>标签或将其转换为评论。
• <script>插入引用合并的 Javascript 的单个标签。

我在结束标记之前插入了单个 js </body>，但您可以根据需要进行调整。这里的源文件位于一个名为“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>