将 Ember + Grunt 构建为 Express + Node 项目

Question

我刚刚加入了一个团队，该团队有一个 Express + Node + MongoDB 项目，几乎没有前端框架。我希望将 Grunt 和 Ember 构建到项目中。我以前从未这样做过，通常我从头开始使用某种堆栈（无论是 Yeoman 还是 MEAN）。

有没有什么好的教程可以将 Grunt 和 Ember 构建到现有项目中/我应该注意的事项？这个问题可能太宽泛了（而且它并没有真正的正确答案......）但我想我会在这里把它拍出来，如果是这样的话，我会在 10 分钟左右关闭它。

Answer 1

您的 ember 和节点应用程序之间几乎没有交叉。您真正需要 express 的只是静态地为您的 index.html 和资源提供服务。

我的处理方式是：

• 在与您的 express.js 应用程序不同的目录中创建您的 ember 应用程序（这样您就不会混淆代码库）

• 目录结构：

  project
  |- backend
  |  |- ... your node app
  |- frontend
  |  |- [package.json]
  |  |- [Gruntfile.js]
  |  |- public
  |  |  |- js
  |  |  |- styles
  |  |  |- images
  |  |  |- [index.html]
  |  |- dev
  |  |  |- vendor
  |  |  |- controllers
  |  |  |- styles
  |  |  |- templates
  |  |  |- ... (other Ember folders)
  |  |  |- [app.js]
  |  |  |- [vendor.js]
  

• 您的Gruntfile.js 任务应该从dev 获取它们的源并将它们编译成public。必须使用模块 IMO：

  • grunt-neuter 组合您的 js 源（推荐输出：public/js/vendor.js 和 public/js/app.js）
  • grunt-ember-templates 把你的车把模板编译成函数，这样你就不用把整个handlebars.js拖到客户端了（推荐输出：public/js/templates.js

• 您将处理的所有资源都应转到dev 文件夹。这包括：

  • 车把模板（例如dev/templates）
  • Less 或 sass 风格 (dev/styles)
  • 供应商库 (dev/vendor/...)
  • Ember 控制器、视图等

• 如果您使用的是 neuter，请将所有包含在 dev/app.js 文件中，按照您想要的顺序。您可以在最后初始化您的主 ember 应用程序。我喜欢将供应商库分离到他们自己的dev/vendor.js 文件中。这些将被编译成它们的public/js/... 对应物。

• 您的 index.html 应该从 public 文件夹加载所有已编译的脚本和样式。如果您按照此处所述设置项目，它最终应该会加载 3 个 javascripts 和 1 个 css。

• 最后，将静态处理程序添加到您的 express.js 应用程序并让它服务文件夹 ../frontend/public。根据配置，您可能需要一个单独的 index.html 处理程序来处理 / 路由。

这是我在 ember-cli 流行之前开发的模式。到目前为止，我对结果非常满意。但是您可能想查看 ember-cli，以防他们开发出更好的方法。