2012-01-16 3 views
2

나는 여러 스킨을 사용할 수있는 html5 상용구로 만든 웹 앱을 보유하고 있습니다.HTML5 상용구 - 여러 CSS 파일을 처리 하시겠습니까?

각 스킨은 별도의 CSS 파일에 포함되어 있으며 사용할 스킨은 구성 파일을 통해 설정됩니다.

HTML5 상용구 빌드 스크립트는 style.css (기본 CSS 파일)에있는 첫 번째 스킨을 축소하고 이름을 바꾸는 동시에 동일한 폴더에있는 다른 두 개의 CSS 파일을 축소하지만 의 이름을 변경하지 않으면 라이브 서버에서 캐싱에 문제가 발생할 수 있습니다. css 파일의 만료 날짜가 멀면 다른 스킨에 대한 업데이트가 사용자의 웹 브라우저에서 선택되지 않습니다.

아무도 나에게 여분의 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에 대해서만 수행합니다.

두 번째 적용 후에는 체크섬 부분이 없습니다. 모든 스타일 파일에 대해 체크섬 및 복사 작업을 반복해야합니다.
이 질문은 도움이 될 수도 있습니다 : Ant: Rename files to include their MD5

+0

네, 맞습니다. 올바른 방향으로 움직여 주셔서 감사합니다. –

+0

작동했습니다. 다시 한 번 감사드립니다. –

관련 문제