客户端应用程序工作流程

Question

我正在尝试使用 yeoman (http://yeoman.io/) 设置客户端应用程序工作流程，并且由于我来自 Rails 背景，我已经习惯了资产管道的细节，它由链轮 (https://github.com/sstephenson/sprockets)。

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

首先想到的问题是，是否有一种成熟的（例如约定优于配置，就像在 Rails 世界中一样）使用 yeoman 开发客户端应用程序的方法？也许是一些权威指南（除了基本的 webapp-generator 指南）？ 有些人建议使用 requirejs（我宁愿不使用它，因为虽然它简化了开发中的事情，但我需要跳过箍来打包应用程序（例如使用 Almond.js 或 AMDclean.js，或者产生不需要的 requirejs 开销） .

我的设置是： Coffeescript、Backbone + Marionette、Handlebars for templates 和 ZURB Foundation with SASS。

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

开发中：

1. 有类似 Rails 的 JavaScript 清单，所以我可以声明依赖的顺序，这将分解成 index.html
2. 对于所有 .scss 文件，将 .css 条目添加到 index.html
3. 在需要时监视和编译每个文件

生产中（dist）：

1. 所有 .scss 文件都已编译、压缩并连接到 app.css
2. 所有 bower 文件连接并缩小到 vendor.js
3. 编译、缩小并连接到 app.js 的所有应用程序 coffeescript 文件
4. 所有模板都已编译、缩小并连接到 templates.js
5. index.html 已修改为仅包含这四个文件。

有类似的设置吗？

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

Answer 1

Yeomam 不会让您像您预期的那样接近 Rails 工作流程。我的两分钱是你看看像Middleman 这样的东西，它是否可以满足你的要求。

自耕农方式

使用生成器

您可以使用 Yeoman 生成器并尝试找出更适合您正在寻找的堆栈的生成器组合，根据您的描述我可能会看一下：

• webapp
• backbone
• maryo

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

• 定义明确的项目结构
• 编译coffeeScript和.scss
• 观察和编译
• 模型、视图、集合...的生成器
• 编译和压缩所有文件以用于生产

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

微调

您可以使用子生成器来构建应用程序的更多特定部分，请参阅Addy Osmani video。

构建生成器

如果您觉得生成器可能强加的某些选择受到限制（例如，您更喜欢 browserify 而不是 requirejs），您可能想要分叉一个生成器并将其添加为选项。您甚至可以构建一个生成器表单来构建您的自定义堆栈！

咕噜咕噜的方式

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 的静态站点生成器

Answer 2

不是对我最初问题的回答，而是对希望实施我正在寻找的相同工作流程的人的指示。我最终编写了一个自定义 Gruntfile，使用 grunt-injector 执行“将资产分解到 index.html”部分，使用 grunt-bower-install 添加 bower 资产并配置 grunt-usemin、grunt-contrib-concat、相应地 grunt-contrib-cssmin 和 grunt-contrib-uglify。

Answer 3

罗马，

回答你的第一个问题，这里是如何使用 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 构建任务，以便它完全按照您的意愿执行。

希望我能给你一些有用的信息:)