结合JS和CSS文件作为构建的一部分

Combining JS and CSS files as part of build

本文关键字：构建一部分文件 JS CSS 结合更新时间：2023-09-26

我想连接我所有的JS文件，以减少浏览器在访问我的网站时发出的HTTP请求的数量。当然，在开发过程中将这些文件分开仍然是有价值的。广泛接受的解决方案是将连接作为构建的一部分执行。

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

我如何交换这些引用作为构建的一部分?

基于ant的解决方案可以从这个示例中派生出来。我将插入标准的免责声明，用正则表达式"解析"HTML可能不是一个好主意。

这个想法是:

删除所有<script>标签或将其转换为注释
插入一个<script>标签来引用你的合并Javascript。

我在</body>结束标记之前插入了单个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>

这样做的一种方法是让html只加载一个脚本，但在开发中，该脚本只是各种各样的"包装器"，它使用这里列出的技术强制加载其他单独的脚本。在生产中，该脚本的内容被替换为所有脚本的联合(最好是通过一些服务器端连接)。

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

有一个名为wro4j的库，它可以用作构建时解决方案(maven插件)或运行时解决方案(过滤器)，并帮助您将所有资源描述在单个位置，简单如:

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

这样，你可以切换html中的所有资源引用:

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

<script src="all.js">

免责声明:这是一个有偏见的答案，因为我正在做这个项目。

有一个叫做minify: http://code.google.com/p/minify/的Google项目，它可能正是你要找的。

你可以使用modconcat，这是apache插件。它有助于像这样轻松地连接文件。

来自:

<head>
    <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/css/forms.css" type="text/css" media="screen" />
</head>

:

<head>
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" />
</head>