客户端应用工作流程

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 for templates和ZURB Foundation with SASS.

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

开发中:

1. 有像Rails的javascript一样的东西,所以我可以声明依赖的顺序,它会爆炸到index.html
2. 对于所有.scss文件,添加到index.html的.css条目
3. 每个文件在需要时都会被监视和编译

在生产中(dist):

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

有这样的设置吗？

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

Answer 1

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

Yeoman的方式

使用发电机

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

• Web应用程序
• 骨干
• maryo

此时,您的大部分需求(包括开发和生产)都将得到满足:

• 一个定义良好的项目结构
• 编译coffeeScript和.scss
• 观看和编译
• 模型,视图,集合,...的生成器
• 编译并缩小所有文件以进行生产

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

精细调整

您可以使用子生成器来搜索应用程序的更多特定部分,请参阅Addy Osmani视频.

建造发电机

如果您觉得生成器可能会施加某些选择(例如,您更喜欢使用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的替代.读这个
• 为Node.js,Grunt.js和Yeoman 组装静态站点生成器