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

Question

该项目

我有一个基于maven的项目,我需要将其部署到本地tomcat服务器(用于开发).

现在,在前端,我想要一个咕噜咕噜的构建(jslint,concat,karma,sass等).

我需要的

• 一个解决方案,它不仅仅与一个IDE绑定(也应该在命令行中工作)
• 我不想只在一个dist文件夹中部署war文件.
• 每次更改客户端资源时我都不想重新编译java:js,css,html,images等.
• grunt应该观察文件并进行预处理/连接/ lint/tests
• 手表grunt应该将文件部署到本地tomcat并自动重载页面
• 它必须快!我的意思是不到一秒钟.

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

Answer 1

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

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

总结的想法:

1. 使用任何方式运行Java应用程序(maven tomcat插件,Eclipse Servers选项卡等).在标准端口(例如8080)上运行它.我假设你知道怎么做.

2. 使用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

对于此类项目，我的策略是通过重新调整后端来将客户端与后端分开。通过这样做，我可以使用任何类型的客户端作为我的后端服务。以上就是概要，下面我们来深入了解细节。

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

/user/update/{userId}

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

前端：假设您有一个具有大量用户交互的客户端应用程序。您可以将AngularJS用于 Web 应用程序，并使用Twitter Bootstrap进行主题化。例如，在文章列表页面中，您可以在页面加载时对后端服务进行ajax调用。您可以使用 AngularJS 轻松做到这一点。此外，您还可以将返回的数据绑定到页面模型。好的，您已经有了客户端应用程序，它能够向您的服务发出请求以获取特定数据。例如AngularJS项目，你可以参考这里。您可以使用yeoman创建 AngularJS 项目。你还可以使用 grunt 来缩小、丑化你的静态文件，你也可以看看这里。

概括：

1. 您可以将后端代码与客户端应用程序分开部署
2. 您可以根据需要开发多个客户端应用程序。今天开发网络应用程序，有一天开发移动应用程序
3. 您将启动后端，然后打开客户端应用程序。您不需要任何容器或使用客户端应用程序。您可以使用像 apache 这样的 Web 服务器来为您的客户端应用程序提供服务