在战争中打包javascript应用程序(使用grunt和browserify)

Question

我有一个项目,包括一个javascript客户端应用程序和一个基于maven + spring的REST Web服务.

javascript应用程序是使用browserify和grunt构建的.出于这个原因,我无法简单地将html/js源放在基于maven的Web服务项目的src/main/webapp目录中.真正需要最终的是在浏览器化/ grunt编译之后javascript app的dist目录的内容.

问题是:如何设置以便javascript应用程序与Web服务战争打包(请注意,这将需要包含grunt/browserify构建步骤)？

Answer 1

这可以通过使用maven 的frontend-maven-plugin来实现。我在每次 Maven 构建期间使用它执行以下步骤：

• 下载并安装 Node.js（如果尚不存在）
• 更新 npm 包
• 执行我的前端构建（gulp）
• Gulp 会将我的 SASS 和 JS 编译到插件中指定的文件夹

我还可以通过更改文件来触发 gulp 构建。我的POM的一部分（对于 grunt 应该类似）：

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>0.0.26</version>
            <configuration>
                <workingDirectory>src/main/frontend</workingDirectory>
                <installDirectory>.</installDirectory>
            </configuration>
            <executions>
                <!-- Config from: https://github.com/eirslett/frontend-maven-plugin -->
                <!-- phase optional for all executions: default phase is "generate-resources" -->
                <!--  disable some of the following executions to improve build speed -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <nodeVersion>v4.1.1</nodeVersion>
                        <npmVersion>3.3.3</npmVersion>
                        <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
                        <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>gulp build</id>
                    <goals>
                        <goal>gulp</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <srcdir>src/main/frontend</srcdir>
                        <outputdir>src/main/webapp/resources</outputdir>
                        <arguments>build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>