客户端应用工作流程

时间:2014-02-21 12:50:50

标签: backbone.js coffeescript gruntjs yeoman bower

我正在尝试使用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. 在需要时观看和编辑每个文件
  4. 在制作中(dist):

    1. 编译,缩小并连接到app.css的所有.scss文件
    2. 所有凉亭文件连接并缩小为vendor.js
    3. 所有应用程序coffeescript文件已编译,缩小并连接到app.js
    4. 所有模板都已编译,缩小并连接到templates.js
    5. index.html已修改为仅包含这四个文件。
    6. 是否有类似此设置的内容?

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

3 个答案:

答案 0 :(得分:5)

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

Yeoman方式

使用发电机

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

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

  • 明确定义的项目结构
  • 编译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的静态站点生成器

答案 1 :(得分:1)

罗马,

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

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

答案 2 :(得分:0)

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