客户端应用工作流程

Question

我正在尝试使用yeoman（http://yeoman.io/）设置客户端应用程序工作流程，因为我来自Rails背景，我已经习惯了资产管道的细节，这是由Sprockets（https://github.com/sstephenson/sprockets）支持。

我努力让所有部分彼此都很好玩，并且已经花了几个小时试图找出它。

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

我的设置是： Coffeescript，Backbone + Marionette，模板把手和SASS的ZURB Foundation。

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

在开发中：

1. 有一些类似于Rails的javascript的清单，所以我可以声明依赖关系的顺序，它会爆炸到index.html
2. 对于所有.scss文件，添加到index.html的.css条目
3. 在需要时观看和编辑每个文件

在制作中（dist）：

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

是否有类似此设置的内容？

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

Answer 1

Yeomam不会让您像预期的那样接近Rails工作流程。我的两分钱是你看看像Middleman这样的东西你想要开箱即用的东西。

Yeoman方式

使用发电机

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

• webapp
• backbone
• maryo

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

• 明确定义的项目结构
• 编译coffeeScript和.scss
• 观看并编译
• 模型，视图，集合的生成器......
• 编译并缩小所有要制作的文件

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

精细调整

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

构建生成器

如果您觉得生成器可能会施加某些选择（例如，您更喜欢使用browserify而不是requirejs），那么您可能希望分叉生成器并将其添加为选项。您甚至可以构建一个可以构建自定义堆栈的生成器表单！

Grunt和Bower方式

Yeoman构建在这两个之上，但你可以随时选择退出并使用这两个构建自己的堆栈。您可以通过bower添加您的deppendencies，使用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

罗马，

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

如果您想默认使用coffeescript，只需传递--coffee param

即可

yo webapp --coffee

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

如果您想让应用程序准备好进行生产，只需输入

即可

grunt build

将统一并缩小所有资产并将其全部丢弃到文件夹中。

要自定义构建过程中的内容，您必须自己编写或自定义grunt构建任务，以便它能完全按照您的意愿执行。

希望我能给你一些有用的信息：）

Answer 3

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