2012-01-16 13 views
2

私はhtml5定型句で構築された複数のスキンを持つWebアプリケーションを持っています。HTML5ボイラープレート - 複数のCSSファイルを処理しますか?

各スキンは別々のCSSファイルに含まれており、使用するスキンは設定ファイルで設定します。

現時点では、HTML5定型ビルドスクリプトはstyle.css(デフォルトのCSSファイル)にある最初のスキンを縮小して名前を変更しますが、同じフォルダにある他の2つの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

+0

関連するコードをbuildscriptから投稿できますか? – oers

+0

もちろん、完了しました。応答していただきありがとうございます。 –

答えて

1

私はあなたのビルドファイルを理解していれば、正しくお

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

部分のskin*.cssファイルです。 style.cssの場合にのみ行います。

2回目の適用後にチェックサム部分はありません。すべてのスタイルファイルについてチェックサムとコピーを繰り返す必要があります。
この質問はこのタスクに役立つかもしれません:Ant: Rename files to include their MD5

+0

はい、私はそれが正しいと思っています - 私に正しい方向への微笑みを与えてくれてありがとう。 –

+0

それは働いた - ありがとう再び。 –

関連する問題