使用Yeoman你必须要知道的
- - CSDN博客Web前端推荐文章不得不说，这年头写JS程序变得越来越复杂了. 虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的. 今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具. 可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了.
使用Yeoman你必须要知道的
标签：
yeoman
知道
| 发表时间：2014-09-23 05:42 | 作者：jyee721
出处：http://blog.csdn.net
不得不说，这年头写JS程序变得越来越复杂了。虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的。
今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具。可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了。前端同志只要用”grunt serve“就可以预览你的Web App而不用配置Web服务器，用"grunt build"就可以导出经过压缩的CSS/HTML/JS甚至是图片，连路径都帮你改好了，岂不是很酷！
但是！决定用它就需要知道以下几点：
- 配置麻烦。新机需要装：
- Node.js & NPM
- Grunt Cli
- Bower
- Git Bash
- 部分Mac需要全局装某个Karma的NPM包
关于这个问题我已经忘了包的名字，但当时运行grunt test做单元测试的时候总是给我报找不到karma任务的错误，头疼的很，最终是在stackoverflow上找到一个老兄的建议而解决的。 - Yeoman
- 对应的generator包，如Angular用generator-angular包
装完之后用yo命令初始化项目，根据你的选项最后会运行bower install和npm intall命令来自动获取项目所以依赖的包。但根据我几次使用的经验，通常都会碰到奇怪的问题而导致失败，然后自己还得手动运行bower install和npm install命令……这配置过程真漫长
- 想要不根据Yeoman初始化给你的路径来，你就得好好改GruntFile了。根据GruntFile的内容，可以知道在grunt build压缩和导出文件时：
- /app/styles/font里的文件会被拷到/dist/fonts，svg文件会被压缩，但是不认子目录下文件
- /app/images里的图片文件会被压缩拷贝到/dist/images，但是对格式有所筛选
- HTML是只压缩拷贝读取/app根目录和/app/views目录及其子目录下文件
- CSS和JS则是根据你在index.html引用文件的代码和用注释配置的目标文件来压缩合并
- 其中bower获取的包会由Grunt的一个任务根据你的bower.js来将对JS和css的引用写入index.html里
- 用复制黏贴的方式拷贝转移项目需要注意。
拷贝项目文件夹到另一台机器内最好不要包括node_components文件夹，拷过去后再运行一遍npm install命令确保程序能运行。
在windows机器中拷贝和删除node_components文件夹很有可能遇到因为路径过长或者文件名过长这种很微妙的问题。
另外因为node_components文件夹真的比较大。本来要用十分钟去压缩的文件夹，删掉压缩瞬间就好了……
- 文件路径的问题：
- 前面说到/app/styles/font里的文件会被拷到/dist/fonts，那就造成了字体文件路径的更改。
Yeoman是用grunt-usemin来扫描更改文件里的路径，但默认的配置是将用<!--build:...--><!--endbuild-->标记包起来的文件们拷到指定路径后进行处理的。
也就是说你把css和js的引用不放在该标记内，build时这文件既不会被导出到dist文件夹内，也不会被压缩进某个文件内，更不会自动更改文件内字体文件引用的路径。 - 观察一下index.html就可以发现通过bower引用的文件，路径是以"bower_compoenents/"开头，而在/app/styles里的CSS文件路径是以"styles"开头，/app/scripts里的JS文件的路径是以"scripts"开头的。
问题就来了。你在用grunt运行你的app是没有问题的，因为人家配置了很多grunt任务来对路径进行处理。那么如果说在前后端开发人员合作时，后端人员有必要在他的机器上添加修改你的代码源文件，那就麻烦了……
- 前面说到/app/styles/font里的文件会被拷到/dist/fonts，那就造成了字体文件路径的更改。
- 运行yo angular来初始化angular项目时会先问要不要用SASS，然后在问要不要用bootstrap。
- 槽点一：好吧，虽然个人比较喜欢SASS，但是bootstrap对less的支持更好，SASS版本貌似没文档？
- 槽点二：结果用bower智能下下来bootstrap的CSS版本，既不没有SASS也么有Less。
- 槽点三：bootstrap的JS对angular支持性不好，真要用还得搞个angular-ui出的angular-bootstrap。
- 槽点一：好吧，虽然个人比较喜欢SASS，但是bootstrap对less的支持更好，SASS版本貌似没文档？
总结：有利有弊，关键还是看你自己的需求，如果只是简单的项目没有必要，大可不去使用。若有说错之处，欢迎指正！
作者：jyee721 发表于2014-9-22 21:42:08 原文链接
阅读：55 评论：0 查看评论
相关 [yeoman 知道] 推荐：
使用Yeoman搭建Web应用
- - 博客 - 伯乐在线在这期的Code Lab中，你将会使用 Yeoman和 AngularJS搭建一个功能完整的应用，示例应用将会简短地介绍一些关于Yeoman、 Grunt和 Bower的特点. 如果你有一些编程经验的话，这期的CodeL Lab会很适合你. Yeoman的logo是一个戴帽子的男人. Yeoman通过集成了三种工具来提升你的工作效率：.
Yeoman学习与实践笔记
- - 孟飞阳的博客Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流. Yeoman的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系.
百度知道XSS漏洞
- - 博客园_首页事情的起因是我一同学在百度知道上看到一个很奇怪的，正文带有连接的提问（ 这里），正常来说，这种情况是不可能出现的. 我条件反射的想到了：XSS漏洞. 通过查看源代码，我马上发现了问题的根源：未结束的标签.
帮我写一个能提取[译]你不知道的NodeJS
- - 掘金前端更新：这篇文章现在是我的书《Node.js进阶》的一部分. 在 jscomplete.com/node-beyond…中阅读此内容的更新版本以及有关Node.js的更多信息. 在今年的Forward.js会议（关于JavaScript的会议）上，我分享了题为“你不知道的NodeJS”的演讲. 在那次演讲中，我向观众提出了一系列有关Nodejs运行时的问题，大多数有技术背景的观众无法回答其中大多数问题.
如何知道你是谁？
- - 改变从这里开始 - 壹心理作者：Psychouse. 来源：微信公众号：北京心舍（ID：psychouse）. 一项研究表明，拥有更好的了解自己的能力可以帮助你做出有效的决定并实现目标. 碧昂斯说：“知道你是谁，是人类拥有的最伟大的智慧. 知道你的目标，你爱什么，你的道德，你的需求，你的标准，你不能容忍什么，你愿意为什么而死.
那些你知道和不知道的千纸鹤
- Brandon - DIY - 果壳网千纸鹤是一件经典折纸作品，理工男现在就要利用几何知识打破经典，开拓创新. 申明：本文所述作品（除最后一只翻转鹤）均属原创，如有雷同，纯属英雄所见略同. 你将需要的工具和材料有：. 10 一刀纸鹤（非原创）. 12 DIYer签到处
12.1 大手牵小手. 正方形是用来折纸的一种完美形状，想要创新，首先就要突破正方形的限制.
社交搜索——百度知道，不如你我知道
- - 微博之博本篇文章作者王德超，程序员一枚，创业在路上，微博@哀木涕啊. 当你想订购一台吐司机的时候，你会去哪儿寻找参考信息. 我想大概有许多人像我一样，习惯了使用Google 、百度或者Bing. 但他们真的会给我们最需要的答案吗. 作为一名使用微博3年以上的老围脖，突然发现自己在搜索答案时出现了另一个习惯.
推荐技术随谈，你知道的或者不知道的
- - IT瘾-dev大家好，今天想和大家讨论下相关推荐技术通用的特点及在实践中的改进点，这也是我们团队在研发实践中一些经验总结. 首先，推荐解决主要问题是给用户在没有行为的新闻上预测一个偏好概率，然后通过概率值由高到低排序推荐给用户. 如图简单地表达了用户在新闻上的稀疏行为矩阵，通过我们会基于用户的画像特征、内容特征、上下文场景特征、用户对新闻的各种操作行为特征等对内容候选集进行排序打分.
关于xargs，你可能不知道的
- Caiwangqin - 黑客志如果你曾经花了许多时间在Unix命令行上，那么或许你已经见过xargs了，如果你还没听过xargs，那就先让我来解释下，xargs是一个从标准输入或许参数并执行命令的程序. 我常常见到将find和xargs组合使用以对find返回的文件列表执行某些操作. 更新：根据Twitter和hacker news上的反馈，find是个很强大的命令，它自己也有-exec和-delete这样的参数可以用来执行命令和删除文件，尽管如此，如果你对find的这些选项不太了解，或是想不起来-exec那古怪的语法，那么你还是可以使用更为简单的xargs，并且xargs在效率上也更胜一筹.