如何使用 Ant 从外部 CSS @import 文件连接 CSS 文件答案

【问题标题】：How to use Ant to concatenate CSS files from external CSS @import file如何使用 Ant 从外部 CSS @import 文件连接 CSS 文件
【发布时间】：2013-01-04 23:39:17
【问题描述】：

如何使用 Ant 连接一个 CSS 文件列表，在 1 个外部 CSS 文件中使用 @imports 指定？

指定 css 文件和文件顺序的 CSS 文件如下所示：

 @import url('header.css');
 @import url('footer.css');
 @import url('module/module1.css');
 @import url('module/module2.css');

我希望 Ant 将 css 中指定的所有文件加载并连接到一个文件中。这可能吗？

【问题讨论】：

标签： css ant build

【解决方案1】：

您可以使用 Ant loadfile 任务执行此操作，然后是 concat。

这是一个例子，linecontainsregexp 可能是可选的，如果你的带有 import 语句的 css 文件只包含 import 语句，每行一个。（如果那个 css 文件更复杂，那么下面需要细化。）

<loadfile property="master.css" srcfile="master.css">
    <filterchain>
        <linecontainsregexp>
            <regexp pattern="@import url" />
        </linecontainsregexp>
        <replaceregex pattern=".*'(.*)'.*" replace="\1," />
        <striplinebreaks/>
    </filterchain>
</loadfile>

结果是一个属性，其中包含按所需顺序排列的以逗号分隔的 css 文件列表。然后可以使用 Ant filelist 在串联中指定它们：

<concat destfile="all.css">
    <filelist files="${master.css}" />
</concat>

【讨论】：

效果非常好。一百万谢谢！您还刚刚解决了另一个“不可能”的问题；连接时文件列表（即真实文件）似乎不尊重顺序。将文件列表作为逗号分隔的属性变量很聪明。