Question

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

是否有任何好的教程可以将Grunt和Ember构建到现有项目/我需要注意的事项中？这个问题可能过于宽泛（加上它确实没有正确的答案......）但我想我会在这里拍摄并在10分钟左右关闭它，如果是这样的话。 / p>

Answer 1

你的余烬和节点应用之间的间隙非常小。你真正需要的只是静态服务你的index.html和资源。

我处理它的方式是：

在您的express.js应用程序的单独目录中创建您的余烬应用程序（这样您就不会混淆代码库）

目录结构：

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文件夹。这包括：
- Handlebars模板（例如dev/templates）
- 较少或较少的样式（dev/styles）
- 供应商库（dev/vendor/...）
- 灰烬控制器，视图等
如果您正在使用中性，请按所需顺序将所有包含放在dev/app.js文件中。您可以在最后初始化主要的ember应用程序。我喜欢将供应商库分成他们自己的dev/vendor.js文件。这些将被编译到他们的public/js/...对应部分。
您的index.html应该从public文件夹加载所有已编译的脚本和样式。如果您按照此处所述设置项目，最终应该加载3个javascripts和1个css。
最后，在您的express.js应用中添加一个静态处理程序，并将其提供给文件夹../frontend/public。根据配置，您可能需要为/ route。

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

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

1 个答案: