How to use Ant to concatenate CSS files from external CSS @import file

Question

How can I use Ant to combine a list of CSS files specified in 1 external CSS file using @imports?

The CSS file that specifies the css files and file order is as follows:

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

I want Ant to download and terminate all files specified in css into one file. Is it possible?

Answer 1

You can do this using the Ant loadfile task and then concat .

Here's an example, linecontainsregexp may be optional if your css file with import statements contains only import statements, one per line. (If this css file is more complex, then clarification is required below.)

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

The result of this is a property containing a list of css comma separated commas in the required order. After that, you can specify Ant filelist to specify them in concatenation:

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