Question

项目

我有一个基于maven的项目，我需要将其部署到本地tomcat服务器（用于开发）。

现在，在前端，我想要一个笨蛋开发构建（jslint，concat，karma，sass等）。

我需要什么

一种解决方案，它只与一个IDE无关（也应该在命令行中运行）
我不想仅将 war 文件部署到 dist文件夹。
每次更改客户端资源时，我都不想重新编译java：js，css，html，images等。
grunt应该观看文件并进行预处理/连接/ lint / tests
在watch grunt应该将文件部署到本地tomcat并自动重新加载页面
必须快！我的意思是不到一秒钟。

我看了一些问题，但我无法弄清楚如何使它全部工作

Answer 1

这可能适用于您，也可能不适合您，因为我不确定您是否希望所有内容都完全集成。

此方法将允许您运行Tomcat服务器，允许您通过自动重新加载（以及您可能要运行的任何其他任务）进行前端更改，并且不会在Tomcat中重新编译/重新加载。我使用它并且用于前端开发它非常快。

总结的想法：

使用任何方式运行Java应用程序（maven tomcat插件，Eclipse Servers选项卡等）。在标准端口（例如8080）上运行它。我假设你知道怎么做。
使用grunt，grunt-contrib-watch，grunt-contrib-connect， grunt-contrib-proxy 。在与tomcat不同的端口上运行grunt-contrib-connect，例如9000.设置grunt-contrib-proxy将来自grunt-contrib-connect服务器的请求代理到不同端口的后端tomcat，并在必要时重写URL。

为了帮助您入门，这里是Gruntfile.js的相关部分（修改到您的应用程序）：

// Watches files for changes and runs tasks based on the changed files
watch: {
  js: {
    files: ['<%= my.app %>/scripts/**/*.js'],
    tasks: [],
    options: {
      livereload: '<%= connect.options.livereload %>'
    }
  },
  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= my.app %>/**/*.html',
      '<%= my.app %>/.tmp/styles/**/*.css',
      '<%= my.app %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
    ]
  }
},

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  proxies: [{
    context: '/rest',
    host: 'localhost',
    port: 8080,
    https: false,
    changeOrigin: true,
    rewrite: {
      '^/rest': '/myapp/rest'
    }
  }],
  livereload: {
    options: {
      open: true,
      middleware: function(connect) {
        return [
          require('grunt-connect-proxy/lib/utils').proxyRequest,
          connect.static('src/main/webapp/.tmp'),
          connect.static('src/main/webapp/'),
        ];
      }
    }
  },

要开发，您启动后端Tomcat应用程序，然后使用控制台，运行：grunt serve。进行所需的任何前端更改，它们将自动重新加载，任何相关的grunt任务将随每次更改一起运行。您的应用程序将正常工作，因为所有后端请求都代理到Tomcat，并且使用grunt-contrib-connect处理前端请求。

Answer 2

您的布局几乎与许多项目的布局相同。我敢说，Grunt可以处理客户端资源，Maven可以构建Java后端，这很常见。正如@ wallace-sidhree所说，Grunt也可以开箱即用。

我建议你先阅读Grunt。 Grunt给我一个循环的部分是它奇怪的配置结构，所以configuration guide是必读的。简而言之，您需要加载grunt-contrib-watch插件，并且该插件需要在initConfig中配置特定的Javascript对象。

手册中的一个非常简单的例子是

// Simple config to run jshint any time a file is added, changed or deleted
grunt.initConfig({
  watch: {
    files: ['**/*'],
    tasks: ['jshint'],
  },
});

关于Tomcat，将Grunt的输出置于Tomcat控制之下，至少在开发期间，只会引起令人头疼的问题。例如，每当Tomcat爆炸更改的后端WAR时，Tomcat将覆盖Grunt放入爆炸WAR内的任何客户端资源。并且为了避免您需要将客户端资源放在不同的WAR中。但是，无论如何你必须拆分它们，你最好用lighttpd或httpster托管客户端资源，至少在开发过程中如此。这应该有助于实现亚秒级更新。

我不确定与页面无IDE的自动重新加载，我使用JetBrains＆＃39; Chrome扩展程序;其他答案可能会更好地涵盖它。

Answer 3

我的策略是这种项目通过改善我的后端来区分客户端和后端。通过这样做，我可以使用任何类型的客户端来进行后端服务。这是摘要，让我们深入了解细节。

后端：假设您正在为项目使用Spring MVC。您可以先设计模型和控制器部件。您的网址映射应该是用户友好的结构，如;

/user/update/{userId}

您拥有不同操作的服务，这意味着您的控制器不会依赖您的视图。您没有返回ModelAndView，您从服务返回json数据。您可以从Web客户端，移动客户端或桌面客户端使用此服务。我想，你有一些问题，比如“限制部分怎么样？”。在此模型中，您将不使用Java会话，您还将提供身份验证，如Oauth或Oauth2。简单地说，您有登录表单，用户输入用户名和密码。单击“登录”按钮时，用户名和密码将发送到后端并从db进行评估。您生成一个具有过期时间的唯一令牌。从现在开始，您将使用此令牌执行您的请求。您还可以定义拦截器以检查每个请求的此令牌有效性。您可以使用local storage将此令牌保留在客户端中。最后，您有身份验证机制和服务。这些都不依赖于客户端应用程序。

前端：假设您有一个具有很多用户互动的客户端应用程序。您可以将AngularJS用于网络应用，将Twitter Bootstrap用于主题。例如，在文章列表页面中，您可以在页面加载时对您的后端服务进行ajax调用。你可以轻松地使用AngularJS。此外，您可以将返回的数据绑定到页面模型。好的，你是一个客户端应用程序，它能够向您的服务请求获取特定数据。例如AngularJS项目，您可以参考here。您可以使用yeoman创建AngularJS项目。您还可以使用grunt缩小，uglify您的静态文件，还可以查看here。

<强>要点：

您可以从客户端应用程序单独部署后端代码
您可以根据需要开发多个客户端应用程序。今天，开发网络应用程序，有朝一日开发移动应用程序
您将启动后端，然后您将打开客户端应用程序。您不需要任何容器或使用客户端应用程序。您可以使用apache等网络服务器为您的客户端应用提供服务

Answer 4

您熟悉Grunt吗？如果你正确配置，你可以通过它完成你所要求的大部分工作。

您可以拆分任务并仅运行您想要运行的任务，即只编译与任务相关的资源。
Grunt是基于命令行的，将在文件更改时运行（无需IDE）。
watch任务不会部署任何内容，只会关注文件更改并运行您在其中指定的任务。那些是将连接的，美化的/缩小的，linted的，经过测试的文件部署到您指定的目录的任务。
构建的速度取决于您正在运行的任务数量以及任务必须咀嚼以吐出其输出的应用程序的深度。如果你想要少于一秒的版本，你必须很好地分割你的任务，并且一次只运行几个。

Here is one of my projects。它严重依赖Grunt，精益而快。：）

这可能不是你可能期待的赏金的解决方案，但却是一个领先者。尝试解决您尝试解决的一些问题，然后根据我的建议进行构建。

本地tomcat服务器与grunt手表自动重载

项目

我需要什么

4 个答案: