如何将 npm/gulp/bower 构建过程集成到 sbt 中？答案

【问题标题】：How to integrate npm/gulp/bower building process into sbt?如何将 npm/gulp/bower 构建过程集成到 sbt 中？
【发布时间】：2015-01-26 22:45:35
【问题描述】：

我有两个独立的 git repos，一个拥有一个使用 sbt 构建的 scala 服务器，另一个拥有一个使用 npm/bower/gulp 构建的 webapp 前端。

在服务器 repo 中，我已经有构建独立 jar 的任务（不是标准包任务）；在前端 repo 中，我可以使用 npm install && npm run build 构建，这将生成一个独立目录 _public。

现在我想在 sbt 构建 jar 任务期间包含 UI 目录 _public，我想知道除了在 sbt 中手动生成外部进程来调用 npm 之外是否有更好的方法？

【问题讨论】：

生成外部进程有什么问题？

标签： scala sbt npm gulp bower

【解决方案1】：

目前 sbt-web 和依赖它的 webjars 的状态是它们几乎跟不上 Node.js 和 npm 的增长。例如，sbt-hbs 插件不再维护，我的经验表明它不适用于任何 Node.js 版本 8 或更高版本。在这些基于 webjar 的前端工具中，对 sbt 1.0 的支持也不完整。因此，与问题所暗示的不同，通过 sbt 直接生成 npm 进程来构建前端是比许多更好的解决方案。

This answer from a different question 提供了一种从 sbt 调用 npm 的足够可靠的方法，为了完整起见，我将在这里复制它。

buildFrontend := {
  val s: TaskStreams = streams.value
  val shell: Seq[String] = if (sys.props("os.name").contains("Windows")) Seq("cmd", "/c") else Seq("bash", "-c")
  val npmInstall: Seq[String] = shell :+ "npm install"
  val npmTest: Seq[String] = shell :+    "npm run test"
  val npmLint: Seq[String] = shell :+    "npm run lint"
  val npmBuild: Seq[String] = shell :+   "npm run build"
  s.log.info("building frontend...")
  if((npmInstall #&& npmTest #&& npmLint #&& npmBuild !) == 0) {
    s.log.success("frontend build successful!")
  } else {
    throw new IllegalStateException("frontend build failed!")
  }
}

【讨论】：

【解决方案2】：

如果您的前端使用 NPM 和 Gulp 构建应用程序，您需要使用 NodeJS 引擎运行它（或者也许像 Rhino 或 Nashorn 这样的 JVM 引擎可以做到这一点？不确定），并且它需要一个外部进程。

要问自己的问题是：您真的想将后端的部署与前端的部署结合起来吗？是否存在您只想部署一个而不部署另一个的情况？

我认为使用 SBT 部署前端很不错，但如果你的前端很复杂，你宁愿将它与 SBT 分开。

您的 JS 应用不一定需要作为 Play 公共资产，您可以简单地将其部署到自己的位置并在 Play HTML 模板中引用它。

【讨论】：

【解决方案3】：

我同意 Sebastien 将前端开发（甚至可能部署）与后端分开，因为我自己也在学习这一课。

也就是说，看看 SbtWeb（任务工作流）和 WebJars（包管理）。 SbtWeb 有几个插件可以涵盖基础知识（uglify、concat、filter），在某些情况下我认为如果安装了 node 可以直接使用它。

【讨论】：