HTML5 Boilerplate - 处理多个CSS文件？

我有一个用html5样板构建的web应用程序，它有多个皮肤可用。HTML5 Boilerplate - 处理多个CSS文件？

每个皮肤都包含在一个单独的css文件中，并使用哪个皮肤通过配置文件进行设置。

目前HTML5样板构建脚本缩小并重命名style.css（默认的css文件）中的第一个外观，它还缩小了我在同一个文件夹中的其他两个css文件，但它不会重新命名它们，这将导致现场服务器上的缓存问题 - 当css文件具有远期到期日期时，用户的Web浏览器不会更新其他外观。

任何人都可以给我一些提示，如何添加额外的CSS文件的支持？

为了澄清，运行构建脚本之前，我在我的css文件夹中的以下文件：
的style.css
skin2.css
skin3.css

和运行构建脚本后：
e3b847ea91a5666541ef13b4d9e0797342f5fc31.css - >好
skin2.css - >坏
skin3.css - >坏

我掏出了我认为是相关的代码F ROM中的构建脚本，并增加了一些注释来解释正在发生的事情：

<!-- 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>

全面构建脚本可以在这里找到：http://pastebin.com/Cm1LzJpE

来源

2012-01-16 Billy Mayes

您可以从buildscript发布相关代码吗？ – oers 2012-01-16 19:21:42

当然是的 - 完成了。感谢您的回应。 – 2012-01-18 08:40:00

如果我正确理解你的构建文件，你不这样做的

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

部分为skin*.css文件。您只能为 style.css。

第二次申请后没有校验和部分。您还需要为每个样式文件重复校验和复制。
此问题可能有助于完成此任务：Ant: Rename files to include their MD5

来源

2012-01-18 08:59:39 oers

是的，我认为这是点 - 感谢给我一个正确的方向推动。 – 2012-01-18 11:32:01

得到它的工作 - 再次感谢。 – 2012-01-18 19:15:42

HTML5 Boilerplate - 处理多个CSS文件？

回答

相关问题