GWT + Eclipse - как обновить статические ресурсы, такие как CSS

Я разрабатываю приложение GWT в Eclipse в режиме Hosted.

Когда я что-то меняю в CSS, я не вижу его в браузере. Я пытаюсь полностью перезагрузить браузер, используя CTRL + F5, перезагрузив приложение в Eclipse и не изменив его.

Единственное, что помогает - перестроить мое приложение, используя maven clean install, перезапустить приложение в Eclipse, а затем увидеть изменения. Это занимает много времени.

Любая идея, что я делаю неправильно? Я думаю, что должен быть лучший способ.

С уважением, Лукас

Ответ 1

Проблема заключается в том, что в режиме dev папка sapp cpc скопирована в целевую только при запуске, а DevMode не обновляет ее. В качестве обходного пути вы можете использовать copy-resources, которые позаботятся о внесении изменений на лету.

    <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.0.1</version>
        <executions>
            <execution>
                <id>copy-resources</id>
                <phase>validate</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <configuration>
                    <outputDirectory>${project.build.directory}/gwt-webapp</outputDirectory>
                    <resources>
                        <resource>
                            <directory>src/main/webapp</directory>
                            <filtering>true</filtering>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>

Ответ 2

Я использую внешний файл CSS для своего приложения, и сразу вижу все изменения в моем браузере при простом обновлении (без кэша опустошения, перезагрузки сервера и т.д.) в Chrome и Firefox.

Проблема может быть связана с расположением вашего файла. Мой файл находится в каталоге /war, и я редактирую его напрямую. Другая возможность заключается в том, как вы ссылаетесь на свой файл на своей главной странице. Убедитесь, что у вас есть относительный путь, например "/myCss.css".

Ответ 3

Есть три способа решить эту проблему. Хотя я не использую eclipse (я код с IntelliJ и использую режим размещения из моей командной строки Gradle script), но, надеюсь, они все равно будут работать.

Во-первых, нужно выяснить, где ваш хостинг-режим обслуживает файлы, в идеале - взорванный военный каталог. Там вы можете найти файл CSS, который будет точной копией вашего файла CSS, который вы пытаетесь изменить. Внесите необходимые изменения, перезагрузите, измените и т.д., А затем, когда вы закончите, не забудьте скопировать этот файл и вставить его обратно в исходный каталог. Я использую VIM и переключаюсь туда и обратно. Я уверен, что вы могли бы написать script, который скопировал файл обратно, когда хост-режим завершился, если бы вы были более сильными.

Второй метод (и гораздо лучший метод), как указывает пользователь1570921, заключается в том, чтобы внедрить CSS в ваш код UIBinder. Например, у вас может быть:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<ui:style>
    .outsidePanel {
        background: #00F;
    }
</ui:style>

<g:HTMLPanel styleName="{style.outsidePanel}">
    Hello, World!
</g:HTMLPanel>

В приведенном выше примере вы можете отредактировать CSS внутри раздела ui: style, нажать F5 и увидеть изменения, затем внести дополнительные изменения и т.д. Не нужно копировать файлы.

Здесь хорошая ссылка для получения дополнительной информации: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World

Третий способ - использовать Google Chrome Dev Tools (CTRL-Shift-I) или F12 в Firefox. Там вы можете редактировать встроенный CSS без изменения вашего файла. Извлеките все нужные значения, добавьте новые, удалите старые, а затем внесите те же изменения в свой CSS файл. Тогда вам не нужно перераспределять, чтобы видеть изменения.

Я лично использую комбинацию # 2 и # 3.

Ответ 4

Попробуйте поместить строку <stylesheet src="sheet.css" /> или <stylesheet src="/sheet.css" /> в файл project.gwt.xml.

Привет,

Eddy

Ответ 5

На веб-странице вашего проекта/приложения просмотрите страницу источника. Обычно это вариант, когда мы щелкаем правой кнопкой мыши страницу.

Нажмите на ссылку .css, которая выглядит примерно так:

<link type="text/css" rel="stylesheet" href="Foo.css"

в этом случае нажмите Foo.css

Содержимое файла .css будет отображаться, но, вероятно, не будет содержать ваши изменения. В этом случае обновите текст .css, нажав клавишу F5 или кнопку обновления браузера.

Если ваши изменения .css теперь появляются, вернитесь на веб-страницу проекта GWT и обновите еще раз.

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