客户端应用程序工作流程

Question

我正在尝试使用 yeoman（http://yeoman.io/）建立客户端应用程序工作流，在 Rails 背景下，我习惯于由 Sprockets（https://github.com/sstephenson/sprockets）支持的资源管道的便利性。

我正在努力让所有部分彼此协作，并已经花费了几个小时来尝试弄清楚。

首先要考虑的问题是，是否有一种已经确立的（例如在 Rails 世界中类似约定优于配置的方式）使用 yeoman 开发客户端应用程序的方法？是否有某些明确的指南（除了基本的 webapp-generator 指南）呢？

有些人建议使用 requirejs（我宁愿不使用它，因为虽然它简化了开发过程，但我需要通过 Almond.js 或 AMDclean.js 打包应用程序，或者承受 requirejs 的不必要开销）。

我的设置是：

Coffeescript、Backbone + Marionette、Handlebars 用于模板和 ZURB Foundation with SASS。

最终我想要实现以下设置，同时使用 bower 管理第三方依赖项：

开发环境:

1. 有类似 Rails 中的 javascript 清单，使我可以声明依赖项的顺序，这将被拆分到 index.html 中
2. 为所有 .scss 文件添加一个 .css 条目到 index.html 中
3. 每个文件进行观察并在需要时进行编译

生产环境（dist）:

1. 所有 .scss 文件被编译、压缩和合并为 app.css
2. 所有 bower 文件合并和压缩为 vendor.js
3. 所有应用程序 coffeescript 文件被编译、压缩和合并为 app.js
4. 所有模板被编译、压缩和合并为 templates.js
5. index.html 修改为仅包括这四个文件。

是否有类似于这样的设置可用呢？

我也愿意听取建议和/或其他替代工作流。

- Roman

Answer 1

Yeoman无法像您预期的那样让您更接近Rails工作流程。我的建议是您可以看看类似于Middleman这样的东西，因为它能够直接满足您的需求。

Yeoman方式

使用生成器

您可以使用Yeoman生成器并尝试找到最适合您所需堆栈的生成器组合，从您描述的情况来看，我可能会看一下：

• webapp
• backbone
• maryo

此时，您的大多数要求（开发和生产）都将得到满足：

• 一个良好定义的项目结构
• 编译CoffeeScript和.scss
• 监视和编译
• 为模型、视图、集合等生成器
• 为生产环境编译和压缩所有文件

您可以使用多个生成器来自定义自己的堆栈，每当Yeoman检测到一个生成器覆盖现有文件时，它将提示要做什么，并且您应该能够自己管理冲突。一些框架生成器显然会冲突（在backbone之上尝试使用angular生成器是没有意义的）。

微调

您可以使用子生成器来构建应用程序的更具体部分，请参见Addy Osmani视频。

构建生成器

如果你觉得生成器的某些选择有限（例如，你更喜欢browserify而不是requirejs），你可能想要fork一个生成器并将其添加为选项。你甚至可以从头开始构建一个生成器来构建你的自定义堆栈！

Grunt和Bower方式

Yeoman是基于这两个构建的，但你可以随时选择退出并使用这两个构建自己的堆栈。你可以通过bower添加你的依赖项，并使用grunt添加你的任务。有很多例子可以给你一些指导，你可以从Yeoman webapp开始。在github上也有很好的例子，比如juanghurtado/puppeteer。

有3个文件你必须注意：

- package.json - 所有你的节点依赖关系都在这里 - bower.json - 管理客户端依赖关系 - Gruntfile.js - 在这里定义任务

总结

也许我在陈述显而易见的事情，但是Yeoman可以帮助你管理Grunt和bower，这些魔法只有当你完全理解这两个工具的工作方式时才会发生。因此，我建议你首先深入了解一些代码，充分理解Grunt和Bower的工作方式，然后再使用Yeoman的魔法。

其他一些工具

你要求一些建议，下面是一些：

• gulp.js Grunt的替代品。你越深入了解Grunt，就越想用Gulp（个人意见）。
• browserify Require的替代品。阅读this
• assemble Node.js、Grunt.js和Yeoman的静态网站生成器

- a--m

---

非常感谢您的回答。顺便问一下，您在maryo或puppeteer方面有任何成功经验吗？它们看起来很有前途。 - Roman

我发现 Grunt 单独完成了 Yeoman 所需的大部分工作。将其与 Bower 结合使用，您几乎可以完成平均应用程序所需的任何操作。如果您的应用程序需要更复杂的功能，则 Node 是您的好朋友 - 使用 Node 您可以实现仅在终端级别可能的操作。 - Wallace Sidhrée

是的，最终我使用了自定义构建的Gruntfile。这个问题更多地是“其他人在做什么”的问题。 - Roman

@Roman，您能详细说明为什么不行吗？正如Yeoman官网所述，“混合了业内已经发展出的许多最佳实践”，这是Yeoman的基础之一。当然，您可以对此持有不同意见，我只是想知道您的观点 :) - a--m

@dome 嗯，我的问题很明显地指出了缺失的部分。它目前是为特定的工作流程构建的，而这种工作流程今天已经不再流行了。我可以说，Rails 的资产管道虽然有许多缺点，但更好、更容易上手。 - Roman

Answer 2

Roman，

回答你的第一个问题，这里有一个使用Yeoman的指南：http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254

如果你想默认使用coffeescript，请传递--coffee参数

yo webapp --coffee

处理资产订单，您可以从index.html文件中处理。

当您想要准备好生产应用程序时，只需键入

grunt build

这将统一和压缩所有资产，并将其全部放入dist文件夹。

如果要自定义构建过程中的内容，您需要编写自己的构建任务或自定义grunt构建任务，以便它可以按照您的要求执行。

希望我给了您一些有用的信息 :)

- Leon

---

是的，但我仍然想知道是否有一些比通用Web应用程序生成器更健壮的已建立工作流程。 - Roman

还有一个zf5-generator。问题是，它们彼此之间不兼容。我相信已经有人用某个插件解决了这个问题。我只是找不到它 ;) - Roman

Answer 3

这不是对我的原始问题的答案，而是为那些想要实现我正在寻找的相同工作流程的人提供指针。最终我编写了一个自定义的Gruntfile，使用grunt-injector来执行“将资产分解到index.html”部分，使用grunt-bower-install添加bower资产，并相应地配置grunt-usemin、grunt-contrib-concat、grunt-contrib-cssmin和grunt-contrib-uglify。

- Roman

---

太好了！现在你可以构建一个Yeoman生成器，它将自动化创建你自己的堆栈，并且在未来的项目中，你只需要在命令行输入yo roman-stack就完成了 =P - a--m

是的，我正在考虑这个。但我需要找到一些时间，而最近时间很紧张。 - Roman