使用Yeoman你必须要知道的

不得不说，这年头写JS程序变得越来越复杂了。虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的。

今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具。可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了。前端同志只要用”grunt serve“就可以预览你的Web App而不用配置Web服务器，用"grunt build"就可以导出经过压缩的CSS/HTML/JS甚至是图片，连路径都帮你改好了，岂不是很酷！

但是！决定用它就需要知道以下几点：

  1. 配置麻烦。新机需要装：

    • Node.js & NPM
    • Grunt Cli
    • Bower
    • Git Bash
    • 部分Mac需要全局装某个Karma的NPM包

      关于这个问题我已经忘了包的名字，但当时运行grunt test做单元测试的时候总是给我报找不到karma任务的错误，头疼的很，最终是在stackoverflow上找到一个老兄的建议而解决的。

    • Yeoman
    • 对应的generator包，如Angular用generator-angular包

    以上除了Node和Git之外其余都可用npm命令完成。很多npm包的源都在github上，所以碰到网不好的很容易杯具。

    装完之后用yo命令初始化项目，根据你的选项最后会运行bower install和npm intall命令来自动获取项目所以依赖的包。但根据我几次使用的经验，通常都会碰到奇怪的问题而导致失败，然后自己还得手动运行bower install和npm install命令……这配置过程真漫长

  2. 想要不根据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里

    改GruntFile的时候，再次对谷歌的同志五体投地，这思路……我之前还没写过这么长的Grunt配置文件

  3. 用复制黏贴的方式拷贝转移项目需要注意。

    拷贝项目文件夹到另一台机器内最好不要包括node_components文件夹，拷过去后再运行一遍npm install命令确保程序能运行。

    在windows机器中拷贝和删除node_components文件夹很有可能遇到因为路径过长或者文件名过长这种很微妙的问题。

    另外因为node_components文件夹真的比较大。本来要用十分钟去压缩的文件夹，删掉压缩瞬间就好了……

  4. 文件路径的问题：
    • 前面说到/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任务来对路径进行处理。那么如果说在前后端开发人员合作时，后端人员有必要在他的机器上添加修改你的代码源文件，那就麻烦了……

  5. 运行yo angular来初始化angular项目时会先问要不要用SASS，然后在问要不要用bootstrap。
    • 槽点一：好吧，虽然个人比较喜欢SASS，但是bootstrap对less的支持更好，SASS版本貌似没文档？
    • 槽点二：结果用bower智能下下来bootstrap的CSS版本，既不没有SASS也么有Less。
    • 槽点三：bootstrap的JS对angular支持性不好，真要用还得搞个angular-ui出的angular-bootstrap。

总结：有利有弊，关键还是看你自己的需求，如果只是简单的项目没有必要，大可不去使用。若有说错之处，欢迎指正！

使用Yeoman你必须要知道的

时间： 2024-10-09 21:49:09

使用Yeoman你必须要知道的的相关文章

在开发第一个Android应用之前需要知道的5件事：

你能否详细讲述一下,在开发Android应用过程中每一阶段要用到的技能和编程语言? 建立一个Android应用程序可以归结为两个主要技能/语言:Java和Android系统.Java是Android的通用编程语言,但是Android还包括学习用于app界面设计的XML语言,学习Android概念,以及从Java编程角度运用这些概念. 学了Java和XML之后,再用Android理念将两者连接起来. 我也有分享过一些学习Activities和 Fragments等的Android相关知识.我最喜欢

(转) Java程序员应该知道的10个调试技巧

原地址:http://www.csdn.net/article/2012-09-03/2809495-java-debugging-tips-with-eclipse 调试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运行时上面. 在开始之前,推荐大家去看看Eclipse shortcuts这篇文章,它将会给你带来很多方便.在本文中使用的是Ecli

第二季来袭：奶茶妹妹都用Lync开会了，你们一定要知道的Lync会议的秘密噢~

大家对第一季的关注促使我继续编写第二季,感觉有点像美剧,收视率高我们就继续,哈哈~~写点啥,Lync内容太多了,最近听说奶茶妹妹入职微软了都在使用Lync开会了,那我们就一起谈谈Lync会议的秘密吧! 秘密1:你可以通过视频看到奶茶妹妹噢,还可以设置为重点关注对象. 从Lync 2013开始我们可以支持高清视频了哈,用户在会议过程中视频分辨率最高能够达到1080P级别,也就是1920 x 1080的全高清分辨率噢.另外,在Lync 2013我们可以支持多路视频,可以同时展示5个发言者的视频,并可

PDB文件：每个开发人员都必须知道的 PDB Files

PDB文件:每个开发人员都必须知道的 PDB Files: What Every Developer Must Knowhttp://www.wintellect.com/CS/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx PDB文件:每个开发人员都必须知道的 一 什么是PDB文件 大部分的开发人员应该都知道PDB文件是用来帮助软件的调试的.但是他究竟是如何工作的呢,我们可能并不熟悉

[转]在做自动化测试之前你需要知道的

[转]在做自动化测试之前你需要知道的 2015-06-09 转自:在做自动化测试之前你需要知道的 什么是自动化测? 做测试好几年了,真正学习和实践自动化测试一年,自我感觉这一个年中收获许多.一直想动笔写一篇文章分享自动化测试实践中的一些经验.终于决定花点时间来做这件事儿. 首先理清自动化测试的概念,广义上来讲,自动化包括一切通过工具(程序)的方式来代替或辅助手工测试的行为都可以看做自动化,包括性能测试工具(loadrunner.jmeter),或自己所写的一段程序,用于生成1到100个测试数据.

【转】嵌入式程序员应该知道的16个问题

全面解析<嵌入式程序员应该知道的16个问题> ----Sailor_forever分析整理,[email protected] http://blog.csdn.net/sailor_8318/archive/2008/03/25/2215041.aspx 1.预处理器(Preprocessor) 2.如何定义宏 3.预处理器标识#error的目的是什么? 4.死循环(Infinite loops) 5.数据声明(Data declarations) 6.关键字static的作用是什么? 7.

你需要知道的CSS3 动画技术

译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 请尊重版权,转载须注明本站链接! 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容.如有不足之处,欢迎指正补充. 随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标.我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且

你应该知道的25个非常有用的CSS技巧

在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助,经验丰富的CSS程序员通常都知道这一点,但初学者不要错过了! 这里有25个非常有用的CSS技巧,将帮助你解决让你棘手的CSS代码问题.你可以直接使用到你现在的项目当中 1.更改文本突出显示颜色(Change Text Highlight Color) 您可能不知道!使用

软件测试人员应该知道的

软件测试人员应该居安思危 每当经济不好,公司业绩不好的时候,公司都可能进行裁员. 首先裁的就是测试人员. 因为测试人员的技术水平相对来说比较低,容易被替代,招起来也比较容易.,公司往往先拿测试人员开刀.身为测试人员,虽然我们平常的工作大部分都比较安逸. 但是千万不能温水煮青蛙. 应该自强不息, 要像开发人员一样, 不断学习,提高自己的编程水平.这样就算被裁也能很快找到新的工作. 测试人员应该比开发人员更熟悉业务需求 测试人员的水平主要体现在测试用例的设计上. 要设计出全面,覆盖广的测试用例,需要