HTML5 Boilerplate - обрабатывать несколько файлов CSS? - PullRequest
Новая
       12

HTML5 Boilerplate - обрабатывать несколько файлов CSS?

2 голосов
/ 16 января 2012

У меня есть веб-приложение, созданное с использованием шаблона html5, в котором доступно несколько скинов.

Каждая обложка содержится в отдельном файле css, и какая обложка для использования задается через файл конфигурации.

В настоящий момент сценарий компоновки HTML5 сокращает и переименовывает первый скин, который находится в style.css (файл css по умолчанию), он также минимизирует два других файла css, которые есть в той же папке, но он не переименовывает их, это вызовет проблемы с кэшированием на работающем сервере - обновления других скинов не будут отслеживаться веб-браузером пользователя, если у файлов CSS есть даты истечения срока давности.

Кто-нибудь может дать мне несколько советов о том, как добавить поддержку дополнительных файлов CSS?

Чтобы уточнить, перед запуском сценария сборки у меня есть следующие файлы в моей папке CSS:style.cssskin2.cssskin3.css

и после запуска сценария сборки:e3b847ea91a5666541ef13b4d9e0797342f5fc31.css -> хорошоskin2.css -> плохоskin3.css -> bad

Я извлек то, что я считаю соответствующим кодом из скрипта сборки, и добавил несколько комментариев, чтобы объяснить, что происходит: 

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

1 Ответ

1 голос
/ 18 января 2012

Если я правильно понимаю ваш файл сборки, вы не выполняете часть 

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

для файлов skin*.css.Вы делаете это только для style.css.

. После второго применения часть контрольной суммы отсутствует.Вам также необходимо повторять контрольную сумму и копировать для каждого файла стиля.
Этот вопрос может помочь с этой задачей: Ant: переименование файлов, чтобы включить их MD5

...