Java、gulp 和 maven 文件夹结构

Java, gulp and maven folder structure

提问by igr

I have a Java web project that uses Maven standard directory layout: java files gets into java(actually: /src/main/java), resources into resources, web content into webapp.

我有一个使用Maven 标准目录布局的 Java web 项目：java 文件进入java（实际上：）/src/main/java，资源进入resources，web 内容进入webapp.

Then we wanted to improve our web layer, by adding bower, sass, gulp etc. Our gulp build compiles scss, minimize javascripts, optimize images etc, everything what you would expect. But this introduced 1) another build tool, gulp and 2) generated files by gulp.

然后我们想通过添加 bower、sass、gulp 等来改进我们的 web 层。我们的 gulp 构建编译 scss，最小化 javascripts，优化图像等，一切你所期望的。但这引入了 1) 另一个构建工具 gulp 和 2) 由 gulp 生成的文件。

Question is how to organize such project? One way could be:

问题是如何组织这样的项目？一种方法可能是：

(A) gulp builds into webapp folder

(A) gulp 构建到 webapp 文件夹中

In this solution, all javascript,images,scss files are stored in /src/main/assetsand gets build into the /src/main/webapp. Both sources and gulp-generated files gets committed to the git. The gradle build is independent from gulp, and it is ok for the users that does not have gulp installed - like those who needs to work only on backend. Also, CI servers does not depend on gulp stuff.

在此方案中，所有的JavaScript，图片，SCSS文件存储在/src/main/assets并获得打造成了/src/main/webapp。源文件和 gulp 生成的文件都被提交到 git。gradle 构建独立于 gulp，对于没有安装 gulp 的用户来说是可以的——比如那些只需要在后端工作的用户。此外，CI 服务器不依赖于 gulp 的东西。

(B) use gulp from gradle during build

(B) 在构建过程中使用来自 gradle 的 gulp

In this solution, gulp is called from gradle. Gradle therefore builds everything. And you must use gradle every time when you want to try something. Also, every developer needs to have gulp installed, what may be a problem for developers using windows (as i've been told). Also CI server should know how to run gulp.

在这个解决方案中，gulp 是从 gradle 调用的。因此，Gradle 构建了一切。每次尝试时都必须使用 gradle。此外，每个开发人员都需要安装 gulp，这对使用 Windows 的开发人员来说可能是一个问题（正如我被告知的那样）。CI 服务器也应该知道如何运行 gulp。

My team is torn between these two options. Does anyone have any working experience with either of these solutions?

我的团队在这两种选择之间左右为难。有没有人对这两种解决方案有任何工作经验？

采纳答案by chrylis -cautiouslyoptimistic-

The current best practice here is to treat your frontend build as a separate project and put it in its own Maven or Gradle module. Have your Java build system invoke the JavaScript tooling (e.g., with the maven-exec-plugin) and save the output into the appropriate directory in targetor build. Bundle up the results in a jar and serve off the classpath.

当前的最佳实践是将您的前端构建视为一个单独的项目，并将其放在自己的 Maven 或 Gradle 模块中。让您的 Java 构建系统调用 JavaScript 工具（例如，使用maven-exec-plugin）并将输出保存到target或 中的适当目录中build。将结果打包在一个 jar 中并在类路径中提供。

If you're using Bower, you only need the base Node install on your CI server, and your Java build can invoke the necessary build process from there, fetching JS packages as needed. Don't forget to (1) use --saveand (2) exclude the JS modules directory from source control.

如果您使用 Bower，您只需要在 CI 服务器上安装基本节点，并且您的 Java 构建可以从那里调用必要的构建过程，根据需要获取 JS 包。不要忘记 (1) 使用--save和 (2) 从源代码管理中排除 JS 模块目录。

In addition, I suggest looking at RaveJS, which manages your JavaScript build and keeps you from having to configure watchers and such during development.

此外，我建议查看RaveJS，它管理您的 JavaScript 构建并让您不必在开发过程中配置观察者等。

回答by Erich

I'm currently using Java + Grunt + Maven. I've found there are two ways of packaging your frontend with your backend and the same will certainly apply to Gulp.

我目前正在使用 Java + Grunt + Maven。我发现有两种方法可以将前端与后端打包在一起，同样的方法也适用于 Gulp。

In the end it's up to what's best for your project/team. From my experience I usually use option B when working with others since the decoupling is easily worth the other issues. When I'm doing my own side projects I always go for option A because it's just easier to launch one webserver and to run a local environment closer to what DEV/PROD is like.

最后，这取决于最适合您的项目/团队的方法。根据我的经验，我通常在与他人合作时使用选项 B，因为解耦很容易值得解决其他问题。当我在做我自己的副项目时，我总是选择选项 A，因为启动一个网络服务器并运行一个更接近 DEV/PROD 的本地环境更容易。

A) Put your frontend into the webapp folder(ex. https://github.com/kdubb1337/maven-grunt-webapp)

A）将您的前端放入 webapp 文件夹（例如https://github.com/kdubb1337/maven-grunt-webapp）

Benefits - You can launch your backend and do development all in one place and working with Spring security is a snap, even without OAUTH. Fewer issues working with two webservers up on your local environment when they would normally be bundled into one port on other environments.

好处 - 您可以在一个地方启动后端并进行开发，即使没有 OAUTH，使用 Spring 安全性也很容易。在本地环境中使用两个 Web 服务器时，它们通常会捆绑到其他环境中的一个端口，因此问题较少。

B) Keep your frontend in a different folder, or even in a different repo that you clone into the root folder of your backend repo. (ex. https://github.com/kdubb1337/maven-grunt) see the 'yo' folder

B)将您的前端保存在不同的文件夹中，或者甚至在您克隆到后端存储库根文件夹的不同存储库中。（例如https://github.com/kdubb1337/maven-grunt）查看“yo”文件夹

Benefits - Fantastic decoupling so front end developers can live in joy without having to even install java locally or worry about recompiling your backend. Works great if you want Travis (or your favourite CI app) to do unit tests on the backend and the frontend.

优点 - 出色的解耦，前端开发人员可以享受快乐，甚至无需在本地安装 java 或担心重新编译后端。如果您希望 Travis（或您最喜欢的 CI 应用程序）在后端和前端进行单元测试，则效果很好。

EDITI've found this awesome plugin you can use with maven/gradle to build the frontend https://github.com/eirslett/frontend-maven-plugin. Seems like the way to go, will be refactoring my starter projects with this guy for grunt and gulp

编辑我发现了这个很棒的插件，你可以用 maven/gradle 来构建前端https://github.com/eirslett/frontend-maven-plugin。似乎是要走的路，将与这个人一起重构我的入门项目以获得咕噜声和吞咽

回答by Michael Bushe

My recommended best practice is using the com.github.eirslett.frontend-maven-plugin (or the maven grunt plugin) to call the grunt/gulp build from mvn (in process resources goal). When CI builds, it's all integrated, even npm etc can be installed in mvn's target so you don't have bother to configure your CI server for npm.

我推荐的最佳实践是使用 com.github.eirslett.frontend-maven-plugin（或 maven grunt 插件）从 mvn（进程资源目标）调用 grunt/gulp 构建。当 CI 构建时，它都是集成的，甚至 npm 等都可以安装在 mvn 的目标中，这样你就不必为 npm 配置 CI 服务器了。

When developers build, then mostly still just use one maven command. For JS/CSS/HTML developers, after mvn clean install, they can run grunt/gulp "watch" in the background to get their JS changes reflected immediately in the browser without incurring any maven overhead (just the wicked fast gulp/grunt tasks).

当开发人员构建时，大多数情况下仍然只使用一个 maven 命令。对于 JS/CSS/HTML 开发人员，在 mvn clean install 之后，他们可以在后台运行 grunt/gulp "watch"，让他们的 JS 更改立即反映在浏览器中，而不会产生任何 maven 开销（只是邪恶的快速 gulp/grunt 任务） .

回答by ankur kushwaha

1. Deploy the UI components on default Tomcat webapp directory.
2. Deploy the class files on "wtpwebapps" (default directory for uploading war through eclipse) directory.

1. 在默认的 Tomcat webapp 目录中部署 UI 组件。
2. 将类文件部署在“wtpwebapps”（通过eclipse上传war的默认目录）目录中。

Setting Eclipse

设置 Eclipse

1. Go to server tab, open properties for tomcat
2. Make sure, the location should be [workspace metadata]
3. Then double click on tomcat to open Tomcat overview.
4. Set server location to "Use tomcat location".

1. 转到服务器选项卡，打开 tomcat 的属性
2. 确保，位置应该是 [工作区元数据]
3. 然后双击tomcat打开Tomcat概览。
4. 将服务器位置设置为“使用 tomcat 位置”。

Grunt/Gulp Setting

咕噜声/吞咽设置

1. Use the copy task to copy the build UI file to<tomcat installation directory>/webapps/<contextRoot>/

1. 使用复制任务将构建的 UI 文件复制到<tomcat installation directory>/webapps/<contextRoot>/

https://pub.scotch.io/@ankur841/eclipse-tomcat-deployment-with-gruntgulp-build

https://pub.scotch.io/@ankur841/eclipse-tomcat-deployment-with-gruntgulp-build