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文件？

回答

相關問題