backbone.js - 客户端应用程序工作流

Question

我正在尝试使用 yeoman ( http://yeoman.io/ ) 设置客户端应用程序工作流程，由于我来自 Rails 背景，因此我习惯了由 Sprockets ( https://github.com/sstephenson/sprockets ) 支持的 Assets 管道的细节。

我正在努力让所有部分相互配合，并且已经花了几个小时试图弄清楚。

想到的第一个问题是，是否有一种完善的(例如，在 Rails 世界中的约定优于配置)的方式来使用 yeoman 开发客户端应用程序？一些权威指南(除了基本的 webapp-generator 指南)，也许？
有些人建议使用 requirejs(我宁愿不使用它，因为虽然它简化了开发过程中的事情，但我需要跳过箍来打包应用程序(例如使用 Almond.js 或 AMDclean.js，或者招致不必要的 requirejs 开销) .

我的设置是:
Coffeescript, Backbone + Marionette, Handlebars for Templates 和 ZURB Foundation with SASS。

我最终想要完成的是以下设置，同时使用 bower 来管理 3rd 方依赖项:

开发中:

有类似 Rails 的 javascript list 的东西，所以我可以声明依赖关系的顺序，这将爆炸到 index.html

对于所有 .scss 文件，一个 .css 条目添加到 index.html

每个文件在需要时观看和编译

生产中(分布):

编译、缩小并连接到 app.css 的所有 .scss 文件

所有 bower 文件连接并缩小到 vendor.js

编译、缩小并连接到 app.js 的所有应用程序 coffeescript 文件

所有模板编译、缩小并连接到 templates.js

index.html 修改为仅包含这四个文件。

有这样的设置吗？

我也愿意接受建议和/或其他替代工作流程。

Answer 1

Yeomam 不会让您像您预期的那样接近 Rails 工作流程。我的两分钱是你看看像Middleman这样的东西有它开箱即用的功能。
自耕农方式
使用生成器
您可以使用 Yeoman 生成器并尝试找出更适合您正在寻找的堆栈的生成器组合，根据您的描述，我可能会看一下:

webapp

backbone

maryo

此时，您的大部分要求(开发和生产)都将得到满足:

定义明确的项目结构

编译coffeeScript 和.scss

观看和编译

模型、 View 、集合、...的生成器

编译和缩小用于生产的所有文件

您可以使用多个生成器来自定义您自己的堆栈，每次 Yeoman 检测到生成器覆盖现有文件时，它都会提示该怎么做，您应该能够自己管理冲突。一些框架生成器显然会发生冲突(尝试在 angular 之上使用 backbone 生成器是没有意义的)。
微调
您可以使用子生成器来构建应用程序的更多特定部分，请参阅 Addy Osmani video .
建筑发电机
如果您感到受到生成器可能施加的某些选择的限制(例如，您更喜欢 browserify 而不是 requirejs)，您可能想要创建一个生成器并将其添加为选项。您甚至可以构建一个生成器表单草稿来构建您的自定义堆栈!
Grunt 和 Bower 方式
Yeoman 建立在这两个之上，但您可以随时选择退出并使用这两个构建自己的堆栈。您可以通过 bower 添加您的依赖项，并使用 grunt 添加您的任务。有很多例子可以给你一些指导，你可以从 Yeoman webapp 开始。 github 上也有很好的例子，比如 juanghurtado/puppeteer .
有 3 个文件您必须注意:

package.json——你所有的节点依赖都在这里

bower.json — 管理客户端依赖项

Gruntfile.js — 在这里定义任务

包起来
也许我说的是显而易见的，但 Yeoman 做了一些神奇的工作并帮助您管理 Grunt 和 bower，这种神奇只有在您完全理解这 2 个工作原理时才会发生。所以我建议你首先深入研究一些代码并完全理解 Grunt 和 Bower 的工作原理，然后你可以使用 Yeoman 魔法。
其他一些工具
你问了一些建议，这里是:

gulp.js Grunt 的替代品。你越深入 Grunt，你就越想要 Gulp(恕我直言)。

browserify Requiere 的替代品。阅读 this

assemble Node.js、Grunt.js 和 Yeoman 的静态站点生成器