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

时间:2013-01-04 23:39:18

标签: css ant build

如何使用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中指定的所有文件加载并连接到一个文件中。这可能吗?

1 个答案:

答案 0 :(得分:3)

您可以使用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>