2012-08-15 11 views
10

Estoy desarrollando la aplicación GWT en Eclipse en modo Hosted.GWT + Eclipse - cómo actualizar recursos estáticos como CSS

Cuando cambio algo en CSS no puedo verlo en el navegador. Intento volver a cargar por completo en el navegador usando CTRL + F5, reiniciar mi aplicación en Eclipse y sin cambios.

Lo único que ayuda es a reconstruir mi aplicación usando maven clean install, reiniciar la aplicación en Eclipse y luego puedo ver los cambios. Esto lleva mucho tiempo.

¿Alguna idea de lo que estoy haciendo mal? Creo que debe haber una mejor manera.

respecto, Lukas

+0

no estoy seguro de mi entera confianza CTRL + F5 - usted puede tratar de pasar por el menú de su navegador para borrar la memoria caché y ver si eso hace la diferencia. –

+0

En cualquier caso, se supone que el botón "Reiniciar servidor" en la vista Modo de desarrollo (son las dos flechas circulares amarillas) hace exactamente lo que está pidiendo. Pero he experimentado lo mismo; no siempre lo corta –

+0

Recargar servidor web no funciona. Estoy usando un archivo CSS clásico, pero mis colegas que trabajan con GWT en diferentes proyectos me dicen algo sobre diferentes cargas de archivos CSS usando el paquete de recursos https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle. No lo he estudiado todavía pero lo veré más adelante y publicaré algunas experiencias. Gracias por el consejo. – Gondri

Respuesta

0

Hay 3 maneras de resolver este problema. Aunque no uso eclipse (código con IntelliJ y uso el modo alojado desde mi línea de comando script de Gradle), pero espero que todos funcionen de todos modos.

Lo primero es averiguar de dónde está sirviendo el archivo el modo alojado, idealmente un directorio explosivo de guerra. Allí, puedes encontrar el archivo CSS, que será una réplica exacta de tu archivo CSS que estás intentando cambiar. Haga sus modificaciones allí, vuelva a cargar, modifique, etc., y cuando termine, no olvide copiar ese archivo y pegarlo de nuevo en su directorio de origen. Yo uso VIM y cambio de un lado a otro. Estoy seguro de que podría escribir una secuencia de comandos que copiara el archivo nuevamente cuando finalizara el modo alojado, si fuera más entusiasta.

El segundo método (y un método mucho mejor), como señala el usuario1570921, es incrustar el CSS en su código UIBinder. Por ejemplo, es posible que tenga:

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

En el ejemplo anterior, se puede editar el CSS dentro de la interfaz de usuario: sección de estilo, presione F5 y ver los cambios, a continuación, hacer más cambios, etc. No hay necesidad de copiar los archivos encima.

Aquí es un buen enlace para más información: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World

La tercera forma es utilizar las herramientas de Google Chrome Dev (Ctrl-Shift-I) o F12 en Firefox. Aquí puedes editar el CSS en línea sin modificar tu archivo. Fije todos los valores correctos, agregue nuevos, elimine los antiguos y luego realice los mismos cambios en su archivo CSS. Entonces no tiene que volver a desplegarse para ver los cambios.

Yo personalmente uso una combinación de # 2 y # 3.

+3

El autor de la pregunta en realidad aboga por el uso de un paquete de cliente CSS, no ingresando CSS en la interfaz de usuario: Binder, que creo que es la peor opción. Cada regla de CSS en la aplicación debe escribirse una vez en un lugar: cualquier otro enfoque generaría inconsistencias y requeriría mucho trabajo si se requieren cambios, sin mencionar el soporte para múltiples máscaras. –

1

Utilizo un archivo CSS externo para mi aplicación, e inmediatamente veo todos los cambios en mi navegador con una simple actualización (sin vaciar caché, reinicio del servidor, etc.) tanto en Chrome como en Firefox.

El problema puede estar relacionado con la ubicación de su archivo. Mi archivo está en el directorio/war y lo edito directamente. Otra posibilidad es cómo referencia su archivo en su página de host. Asegúrese de tener una ruta relativa como "/myCss.css".

2

El problema es que en el modo dev, la carpeta src webapp se copia al destino solo al inicio, y DevMode no la actualiza. Como solución, puede usar copy-resources, que se encarga de aplicar los cambios sobre la marcha.

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

tratar de poner una línea <stylesheet src="sheet.css" /> o <stylesheet src="/sheet.css" /> en su archivo project.gwt.xml.

Saludos,

Eddy

Cuestiones relacionadas