Question

I have a web app built with html5 boilerplate that has multiple skins available.

Each skin is contained in a separate css file, and which skin to use is set via a config file.

At the moment the HTML5 boilerplate build script minifies and renames the first skin, which is in style.css (the default css file), it also minifies the other two css files I have in the same folder, but it doesn’t rename them, this will cause problems with caching on the live server – updates to the other skins won’t be picked up by a user’s web browser when the css files have far-future expiration dates.

Can anyone give me some tips on how to add support for the extra css files?

To clarify, before running the build script I have the following files in my css folder:
style.css
skin2.css
skin3.css

and after running the build script:
e3b847ea91a5666541ef13b4d9e0797342f5fc31.css -> good
skin2.css -> bad
skin3.css -> bad

I’ve pulled out what I believe to be the relevant code from the build script, and added some comments to explain what is going on:

    <!-- copy source file to intermediate directory -->
    <copy file="${dir.source}/${dir.css}/${file.root.stylesheet}" tofile="${dir.intermediate}/${dir.css}/${file.root.stylesheet}"/>

    <!-- copy skeleton to concat file -->
    <copy file="${dir.intermediate}/${dir.css}/${file.root.stylesheet}"
          tofile="${dir.intermediate}/${dir.css}/style-concat.css" overwrite="true"/>

    <!-- load the file into a property -->
    <loadfile property="imports" srcfile="${dir.intermediate}/${dir.css}/${file.root.stylesheet}"/>

    <var name="concat-files" value="${file.root.stylesheet}"/>


    <!--minify CSS-->
    <apply executable="java" parallel="false">
        <fileset dir="${dir.intermediate}/${dir.css}/" includes="style-concat.css"/>
        <arg line="-jar"/>
        <arg path="${dir.build.tools}/${tool.yuicompressor}"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="merge" to="${basedir}/${dir.intermediate}/${dir.css}/style-concat.min.css"/>
        <targetfile/>
    </apply>

<!--calculate checksum of css file (this is used for filename)-->
    <checksum file="${dir.intermediate}/${dir.css}/style-concat.min.css" algorithm="sha" property="css.sha" />
    <if>
        <isset property="gae.css_dir" />
        <then>
            <property name="style.css" value="${gae.css_dir}/${css.sha}.css" />
        </then>
        <else>
            <property name="style.css" value="${dir.css}/${css.sha}.css" />
        </else>
    </if>
    <copy file="${dir.intermediate}/${dir.css}/style-concat.min.css" tofile="${dir.publish}/${dir.css}/${css.sha}.css" />

    <!--minify REMAINING CSS files (my other skins)-->

    <apply executable="java" parallel="false">
        <fileset dir="${dir.source}/${dir.css}/" excludes="${concat-files}" includes="**/*.css"/>
        <arg line="-jar"/>
        <arg path="${dir.build.tools}/${tool.yuicompressor}"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.css" to="${basedir}/${dir.publish}/${dir.css}/*.css"/>
        <targetfile/>
    </apply>
    <foreach list="${file.stylesheets}" param="css_file" target="-css-remove-concatenated-stylesheets" />   


    <!--replace reference to css in source with new filename-->
    <replaceregexp match="&lt;!-- CSS concatenated [\d\w\s\W]*?!-- end CSS--&gt;" replace="&lt;link rel='stylesheet' href='${style.css}'&gt;" flags="m">
        <fileset dir="${dir.intermediate}" includes="${page-files}"/>
    </replaceregexp>

Full build script is available here: http://pastebin.com/Cm1LzJpE

Answer 1

If I understand your buildfile correctly you don’t do the

<checksum>
 ...
<copy file="${dir.intermediate}/${dir.css}/style-concat.min.css" tofile="${dir.publish}/${dir.css}/${css.sha}.css" />

part for the skin*.css files. You only do it for the
style.css.

After the second apply there is no checksum part. You need to repeat checksumming and copying for every style file too.
This question might help with this task: Ant: Rename files to include their MD5