如何在页面刷新时重新加载CSS？ gwt maven

Question

这是我正在研究的项目：https://github.com/veracityidinc/idf-sandbox

我是前端开发者，所以这对我来说有点不清楚。我看了一下构建日志，试图在咨询谷歌之后想一想，我看到有人说插件和复制文件。对我来说，一个网络项目 - 无论是哪种类型 - 都不会开箱即用，这似乎很奇怪。每次进行更改时都必须关闭并运行服务器是非常繁琐的。同样非常奇怪的是，应用程序的html部分实际上是单独执行此操作。

Answer 1

GWT只处理JS（以及通过特殊代码构造直接由代码加载的资产），而不是其他Web资产。

DevMode（带有Mojo插件的mvn gwt:run）将为您的webapp服务，而Mojo的插件将在发布时另外复制src/main/webapp。如果要在不重新启动DevMode的情况下更新Web资产，请运行mvn war:exploded -Dgwt.compiler.skip。同样的资源（在src/main/resources）：运行mvn process-resources。

这也是采用不同项目布局，将客户端和服务器代码分离为不同的Maven模块，以及单独运行客户端和服务器代码（mvn gwt:codeserver用于客户端代码，通过net.ltgt.gwt.maven:gwt-maven-plugin和mvn jetty:run或类似用于服务器代码和Web）的一个很好的理由资产）

Answer 2

使用GWT SDM -Super开发模式 - 您将获得开箱即用，SDM将继续在后台运行并监视已修改的文件，在刷新后它将逐步重新编译您的应用程序并重新加载资源。

如果您使用maven来使SDM工作，您需要创建一个GWT项目并应用maven插件，推荐的插件是tbroyer plugin并创建一个已经正确配置的GWT项目，您可以使用tbroyer多模块gwt-maven-archetype。

当您发出命令mvn gwt:codeserver -pl *-client -am时，按照原型的说明，您实际上正在启动SDM。另一个命令正在启动您的应用程序服务器

生成的项目有一个xxx-server模块，您可以在其中找到一个css文件。一旦您运行这两个命令并可以在浏览器中加载您的应用程序尝试更改该文件中的某些样式并刷新页面，则应反映更改。

这是从原型生成项目时的示例插件配置

<plugin>
    <groupId>net.ltgt.gwt.maven</groupId>
    <artifactId>gwt-maven-plugin</artifactId>
    <configuration>
        <moduleName>[replace this with your module]</moduleName>
        <moduleShortName>app</moduleShortName>
    </configuration>
</plugin>

现在，如果您不使用这种多模块结构，您可以尝试使用mvn gwt:devmode启动应用程序和SDM，这应该为您启动SDM

如果您正在使用uibinder，并且您在SDM重新编译时正在编辑* .ui.xml文件中的样式，那么它也应该选择更改。

编辑

检查您的项目我做了一些更改，使其工作。

首先我更改了pom.xml，你可以将我的版本用于以后的项目，但我认为更好的方法是使用tbroyer原型生成项目

pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <groupId>com.candorgrc.idfusion</groupId>
    <artifactId>idf-sandbox</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>IdFusion™ Sandbox</name>
    <properties>

        <!-- Setting maven.compiler.source to something different to 1.8 needs
            that you configure the sourceLevel in gwt-maven-plugin since GWT compiler
            2.8 requires 1.8 (see gwt-maven-plugin block below) -->
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <inject.gin.version>2.1.2</inject.gin.version>
        <inject.guice.version>3.0</inject.guice.version>
        <libsass.version>0.2.10-libsass_3.5.3</libsass.version>
        <lesscss.version>1.7.0.1.1</lesscss.version>
        <elemental2.version>1.0.0-RC1</elemental2.version>

    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.google.gwt</groupId>
                <artifactId>gwt</artifactId>
                <version>2.8.2</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-servlet</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-user</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-dev</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.google.elemental2</groupId>
            <artifactId>elemental2-dom</artifactId>
            <version>${elemental2.version}</version>
        </dependency>
        <dependency>
            <groupId>com.google.gwt.inject</groupId>
            <artifactId>gin</artifactId>
            <version>${inject.gin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.google.inject</groupId>
            <artifactId>guice</artifactId>
            <version>${inject.guice.version}</version>
        </dependency>

    </dependencies>

    <build>
        <!-- Output classes directly into the webapp, so that IDEs and "mvn process-classes"
            update them in DevMode -->
        <outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory>

        <plugins>

            <!-- GWT Maven Plugin -->
            <plugin>
                <groupId>net.ltgt.gwt.maven</groupId>
                <artifactId>gwt-maven-plugin</artifactId>
                <version>1.0-rc-8</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <moduleName>com.candorgrc.idfusion.sandbox.IdfSandbox</moduleName>
                    <moduleShortName>IdfSandbox</moduleShortName>
                    <failOnError>true</failOnError>
                    <!-- GWT compiler 2.8 requires 1.8, hence define sourceLevel here if
                        you use a different source language for java compilation -->
                    <sourceLevel>1.8</sourceLevel>

                    <warDir>${project.build.directory}/${project.build.finalName}</warDir>
                    <classpathScope>compile+runtime</classpathScope>
                    <!-- URL(s) that should be opened by DevMode (gwt:devmode). -->
                    <startupUrls>
                        <startupUrl>sandbox.html</startupUrl>
                    </startupUrls>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.lesscss</groupId>
                <artifactId>lesscss-maven-plugin</artifactId>
                <version>${lesscss.version}</version>
                <configuration>
                    <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
                    <outputDirectory>${project.basedir}/src/main/webapp/less</outputDirectory>
                    <compress>true</compress>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>


        </plugins>
    </build>
</project>

您还需要在与客户端软件包相同的级别上创建一个新软件包，并将其命名为public这是gwt使用的默认公共资源。这应该放在src文件夹com.candorgrc.idfusion.sandbox.public然后将你的css文件sandbox.css移动到这个包中。

一旦进行了这些更改，只要IDE知道css已更改并且应将其移动到目标文件夹中的正确位置，您就可以在刷新页面时重新加载css。