客户端应用程序工作流程

Posted 2023-03-03

技术标签:

【中文标题】客户端应用程序工作流程【英文标题】：Client side app workflow 【发布时间】：2014-03-22 23:59:30 【问题描述】：

我正在尝试使用 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 方依赖项：

开发中：

javascript

html

生产中（dist）：

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

有类似的设置吗？

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

【问题讨论】：

【参考方案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 的静态站点生成器

【讨论】：

非常感谢您的回答。顺便说一句，你在 maryo 或 puppeteer 上取得过成功吗？这些看起来很有希望。不客气 =) 如果您需要一些指导来启动第一个基于节点的项目或快速原型设计，那么 Maryo 和 Puppeteer 都是很好的参考。根据我的经验，我基于 Bower 和 Grunt 构建了许多不同的堆栈，我个人倾向于从其他项目中获得一些灵感，但每个堆栈的特殊性将引导我构建自己的任务和依赖项。我发现 Grunt 本身就完成了大部分繁重的 Yeoman 的功劳。将它与Bower 结合使用，您几乎可以做任何普通应用程序应该做的事情。如果您的应用程序需要更复杂，Node 是您的朋友 - 使用Node，您可以实现只有在终端级别才能实现的东西。是的，我最终得到了一个定制的 Gruntfile。这个问题更像是“其他人在做什么”之类的问题。 @WallaceSidhrée 是的，Yeoman 是建立在这 3 个之上的，但它还添加了生成器、良好实践、项目结构（如果你自己开始，这有点难以管理）并且有一个非常好的社区。span> 【参考方案2】：

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

【讨论】：

太好了！现在您可以构建一个 yeoman 生成器，它会自动创建您自己的堆栈，在未来的项目中，您只需在 shell 中输入 yo roman-stack 即可完成 =P 是的，我正在考虑这个。不过我需要找点时间，最近时间不多了。【参考方案3】：

罗马，

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

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