blocks|key|2754065|text|罗曼|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2754066|回答你的第一个问题，这里有一个如何使用约曼的指南：http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254|offset|length|2754067|如果您想在默认情况下使用coffeescript，只需传递--coffee参数|2754068|yo+webapp+--coffee|code-block|syntax|javascript|2754069|处理您可以从index.html文件处理的资产订单。|2754070|当您想让应用程序为生产做好准备时，只需输入|2754071|grunt+build|2754072|这将统一和缩小您的所有资产，并将其抛出所有dist文件夹。|2754073|要定制构建过程中的内容，您必须编写自己的构建任务或自定义grunt构建任务，以便它能准确地执行您想要的操作。|2754074|希望我给了你一些有用的信息:)|2754075|entityMap|0|LINK|mutability|MUTABLE|url|http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254^0|0|P|2C|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>Roman,</p>

<p>Answer for your first question, here is a guide on how to use Yeoman: <a href="http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254" rel="nofollow">http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254</a></p>

<p>If you want to use coffeescript by default, just pass the --coffee param</p>

<pre><code>yo webapp --coffee
</code></pre>

<p>handling the assets order you can handle from the index.html file.</p>

<p>When you want to get the app ready for production just type the</p>

<pre><code>grunt build
</code></pre>

<p>that will unify and minify all of your assets and throw it all dist folder.</p>

<p>To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.</p>

<p>Hope i gave you some useful information :)</p>


blocks|key|2754164|text|Yeomam不会让你像你想象的那样接近Rails工作流程。我的两个观点是，你可以看看像Middleman这样的东西，它可以做你想要的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2754165|约曼方式|2754166|使用生成器|2754167|您可以使用Yeoman生成器，并尝试找到更适合您正在寻找的堆栈的生成器组合，根据您的描述，我可能会看看：|2754168|2754169|webapp|unordered-list-item|2754170|backbone|2754171|maryo|2754172|2754173|在这一点上，您的大多数需求(开发和生产)都将得到满足：|2754174|对于模型、视图、集合和compile|2754175|generators，|2754176|+coffeeScript和.scss|2754177|watch+structure|2754178|compile+compile|2754179|generators是一个定义明确的项目...|2754180|为production|2754181|编译和压缩所有文件|2754182|2754183|你可以使用多个生成器来定制你自己的堆栈，每当Yeoman检测到生成器覆盖了现有的文件时，它就会提示要做什么，你应该能够自己管理冲突。一些框架生成器显然会发生冲突(试图在backbone之上使用angular生成器是没有意义的)。|2754184|微调|2754185|您可以使用子生成器来搭建应用程序的更多特定部分，请参阅Addy+Osmani+video。|2754186|构建生成器|2754187|如果你觉得受到生成器可能强加的一些选择的限制(例如，你更喜欢browserify而不是requirejs)，你可能想要派生一个生成器，并将其作为一个选项添加。您甚至可以构建一个生成器表单scratch来构建您的自定义堆栈！|2754188|Grunt和Bower+way|2754189|Yeoman是在这两个基础上构建的，但您可以随时选择退出，并使用这两个构建自己的堆栈。你可以通过bower添加你的依赖项，使用grunt添加你的任务。有很多例子可以给你一些指导，你可以从Yeoman+webapp开始。在github上也有很好的例子，比如juanghurtado/puppeteer。|2754190|这里有3个文件，你必须要注意：|2754191|2754192|package.json+-所有节点依赖项都放在here|2754193|bower.json中-管理客户端dependencies|2754194|Gruntfile.js+-在此定义|2754195|的任务|2754196|总结|2754197|也许我说的是显而易见的，但是Yeoman做了一些神奇的工作，并帮助你管理Grunt和bower，只有当你完全理解这两个工作原理时，这种神奇才会发生。因此，我建议您首先深入研究一些代码，充分了解Grunt和Bower的工作原理，然后再使用Yeoman魔法。|2754198|其他一些工具|2754199|你问了一些建议，下面是：|2754200|2754201|gulp.js是Grunt的替代品。你越深入Grunt，你就会越想要Gulp+(IMHO).|2754202|browserify，它是Requiere的替代品。阅读this|2754203|assemble+Static+site+generator+for+Node.js、Grunt.js和Yeoman|2754204|2754205|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/middleman/middleman|1|https://github.com/yeoman/generator-webapp|2|https://github.com/yeoman/generator-backbone|3|https://github.com/simonblee/generator-maryo|4|5|https://github.com/yeoman/generator-angular|6|http://www.youtube.com/watch?v=rYwJ5-esSYE#t=43|7|https://github.com/juanghurtado/puppeteer|8|http://gulpjs.com/|9|http://browserify.org/|10|http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify/|11|http://assemble.io/^0|17|9|0|0|0|0|0|0|0|6|1|0|0|8|2|0|0|5|3|0|0|0|0|0|0|0|0|0|0|0|0|2C|8|4|2O|7|5|0|0|R|H|6|0|0|0|0|3J|M|7|0|0|0|0|0|0|0|0|0|0|0|0|0|7|8|0|0|A|9|S|4|A|0|0|8|B|0|0^^$0|@$1|2|3|4|5|6|7|39|8|@]|9|@$A|3A|B|3B|1|3C]]|C|$]]|$1|D|3|E|5|6|7|3D|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|3E|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|3F|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|3G|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|3H|8|@]|9|@$A|3I|B|3J|1|3K]]|C|$]]|$1|N|3|O|5|M|7|3L|8|@]|9|@$A|3M|B|3N|1|3O]]|C|$]]|$1|P|3|Q|5|M|7|3P|8|@]|9|@$A|3Q|B|3R|1|3S]]|C|$]]|$1|R|3|-4|5|6|7|3T|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|3U|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|3V|8|@]|9|@]|C|$]]|$1|W|3|X|5|M|7|3W|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|M|7|3X|8|@]|9|@]|C|$]]|$1|10|3|11|5|M|7|3Y|8|@]|9|@]|C|$]]|$1|12|3|13|5|M|7|3Z|8|@]|9|@]|C|$]]|$1|14|3|15|5|M|7|40|8|@]|9|@]|C|$]]|$1|16|3|17|5|M|7|41|8|@]|9|@]|C|$]]|$1|18|3|19|5|6|7|42|8|@]|9|@]|C|$]]|$1|1A|3|-4|5|6|7|43|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|6|7|44|8|@]|9|@$A|45|B|46|1|47]|$A|48|B|49|1|4A]]|C|$]]|$1|1D|3|1E|5|6|7|4B|8|@]|9|@]|C|$]]|$1|1F|3|1G|5|6|7|4C|8|@]|9|@$A|4D|B|4E|1|4F]]|C|$]]|$1|1H|3|1I|5|6|7|4G|8|@]|9|@]|C|$]]|$1|1J|3|1K|5|6|7|4H|8|@]|9|@]|C|$]]|$1|1L|3|1M|5|6|7|4I|8|@]|9|@]|C|$]]|$1|1N|3|1O|5|6|7|4J|8|@]|9|@$A|4K|B|4L|1|4M]]|C|$]]|$1|1P|3|1Q|5|6|7|4N|8|@]|9|@]|C|$]]|$1|1R|3|-4|5|6|7|4O|8|@]|9|@]|C|$]]|$1|1S|3|1T|5|M|7|4P|8|@]|9|@]|C|$]]|$1|1U|3|1V|5|M|7|4Q|8|@]|9|@]|C|$]]|$1|1W|3|1X|5|M|7|4R|8|@]|9|@]|C|$]]|$1|1Y|3|1Z|5|6|7|4S|8|@]|9|@]|C|$]]|$1|20|3|21|5|6|7|4T|8|@]|9|@]|C|$]]|$1|22|3|23|5|6|7|4U|8|@]|9|@]|C|$]]|$1|24|3|25|5|6|7|4V|8|@]|9|@]|C|$]]|$1|26|3|27|5|6|7|4W|8|@]|9|@]|C|$]]|$1|28|3|-4|5|6|7|4X|8|@]|9|@]|C|$]]|$1|29|3|2A|5|M|7|4Y|8|@]|9|@$A|4Z|B|50|1|51]]|C|$]]|$1|2B|3|2C|5|M|7|52|8|@]|9|@$A|53|B|54|1|55]|$A|56|B|57|1|58]]|C|$]]|$1|2D|3|2E|5|M|7|59|8|@]|9|@$A|5A|B|5B|1|5C]]|C|$]]|$1|2F|3|-4|5|6|7|5D|8|@]|9|@]|C|$]]|$1|2G|3|-4|5|6|7|5E|8|@]|9|@]|C|$]]]|2H|$2I|$5|2J|2K|2L|C|$2M|2N]]|2O|$5|2J|2K|2L|C|$2M|2P]]|2Q|$5|2J|2K|2L|C|$2M|2R]]|2S|$5|2J|2K|2L|C|$2M|2T]]|2U|$5|2J|2K|2L|C|$2M|2R]]|2V|$5|2J|2K|2L|C|$2M|2W]]|2X|$5|2J|2K|2L|C|$2M|2Y]]|2Z|$5|2J|2K|2L|C|$2M|30]]|31|$5|2J|2K|2L|C|$2M|32]]|33|$5|2J|2K|2L|C|$2M|34]]|35|$5|2J|2K|2L|C|$2M|36]]|37|$5|2J|2K|2L|C|$2M|38]]]]

<p>Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like <a href="https://github.com/middleman/middleman" rel="nofollow noreferrer">Middleman</a> has it does what you want out of the box.</p>
<h1>Yeoman way</h1>
<h2>Using generators</h2>
<p>You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:</p>
<ul>
<li><a href="https://github.com/yeoman/generator-webapp" rel="nofollow noreferrer">webapp</a></li>
<li><a href="https://github.com/yeoman/generator-backbone" rel="nofollow noreferrer">backbone</a></li>
<li><a href="https://github.com/simonblee/generator-maryo" rel="nofollow noreferrer">maryo</a></li>
</ul>
<p>At this point most of your requirements (both development and production) would be fulfilled:</p>
<ul>
<li>a well defined project structure</li>
<li>compile coffeeScript and .scss</li>
<li>watch and compile</li>
<li>generators for model, view, collection, ...</li>
<li>compile and minify all files for production</li>
</ul>
<p>You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a <a href="https://github.com/yeoman/generator-angular" rel="nofollow noreferrer">angular</a> generator on top of <a href="https://github.com/yeoman/generator-backbone" rel="nofollow noreferrer">backbone</a>).</p>
<h2>Fine tuning</h2>
<p>You can use sub-generators to scaffold more specific parts of your app, see <a href="http://www.youtube.com/watch?v=rYwJ5-esSYE#t=43" rel="nofollow noreferrer">Addy Osmani video</a>.</p>
<h2>Building generators</h2>
<p>If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!</p>
<h1>Grunt and Bower way</h1>
<p>Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like <a href="https://github.com/juanghurtado/puppeteer" rel="nofollow noreferrer">juanghurtado/puppeteer</a>.</p>
<p>There are 3 files that you must keep an eye:</p>
<ul>
<li>package.json — all you node dependencies go in here</li>
<li>bower.json — to manage the client dependencies</li>
<li>Gruntfile.js — here you define the tasks</li>
</ul>
<h1>Wrapping up</h1>
<p>Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.</p>
<h1>Some other tools</h1>
<p>You asked for some suggestions, here it goes:</p>
<ul>
<li><a href="http://gulpjs.com/" rel="nofollow noreferrer">gulp.js</a> An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).</li>
<li><a href="http://browserify.org/" rel="nofollow noreferrer">browserify</a> An alternative to Requiere. Read <a href="http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify/" rel="nofollow noreferrer">this</a></li>
<li><a href="http://assemble.io/" rel="nofollow noreferrer">assemble</a> Static site generator for Node.js, Grunt.js, and Yeoman</li>
</ul>


blocks|key|163729|text|不是对我最初问题的回答，而是给那些想要实现我正在寻找的相同工作流程的人的一个指针。我最终编写了一个自定义的grunt文件，使用grunt-injector执行“将资产分解到index.html”部分，grunt-+bower+-install添加bower资产，并相应地配置grunt-usemin、grunt-contrib+concat、grunt-contrib+cssmin和grunt-contrib+uglify。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163730|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Not an answer to my original question, but rather a pointer for someone who'd like to implement the same workflow I was looking for. I ended up writing a custom Gruntfile, using the grunt-injector to do the "explode the assets to the index.html" part, grunt-bower-install to add bower assets and configuring the grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin and grunt-contrib-uglify accordingly.</p>


<p>I'm trying to set up a client-side app workflow with yeoman (<a href="http://yeoman.io/">http://yeoman.io/</a>), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (<a href="https://github.com/sstephenson/sprockets">https://github.com/sstephenson/sprockets</a>).</p>

<p>I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.</p>

<p>The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps?
Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).</p>

<p>My setup is:
Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.</p>

<p>What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:</p>

<p>In development:</p>

<ol>
<li>Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html</li>
<li>For all .scss files a .css entry added to index.html</li>
<li>Each file watched and compiled when needed</li>
</ol>

<p>In production (dist):</p>

<ol>
<li>All .scss files compiled, minified and concatenated to app.css</li>
<li>All bower files concatenated and minified to vendor.js</li>
<li>All application coffeescript files compiled, minified and concatenated to app.js</li>
<li>All templates compiled, minified and and concatenated to templates.js</li>
<li>index.html modified to include only those four files.</li>
</ol>

<p>Is there something like this setup available?</p>

<p>I'm also open for suggestions and/or other alternative workflows.</p>


Client side app workflow

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用yeoman ()设置客户端应用程序工作流，由于我来自Rails背景，因此我已经习惯了链轮()支持的资产管道的细节。我正在努力让所有的角色相互配合得很好，并且已经花了几个小时试图弄清楚。我想到的第一个问题是，有没有一种成熟的方法(例如约定重于配置，就像在Rails世界中一样)来使用yeoman开发客户端应...

问客户端应用程序工作流
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问客户端应用程序工作流EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问客户端应用程序工作流
EN