Yeoman入门之安装及环境配置

Yeoman入门之安装及环境配置

http://blog.csdn.net/panlingfan/article/details/27345037

http://www.nodejs.orgYEOMAN的特性

1. Yeoman 是 Google 官方推荐的一款 AngularJS 开发工具。
2. 闪电般的初始化：项目开始阶段，可以基于现有的末班框架（例如：HTML5 Bolierplate、Twitter Bootstrap）进行项目初始化的快速构建。
3. 了不起的构建流程：不仅仅包括JS、CSS代码的压缩、合并，还可以对图片和HTML文件进行优化，同时对CoffeScript和Compass的文件进行编译。
4. 自动编译CoffeScript和Compass：通过LiveReload进程可以对源文件发生的改动自动编译，完成后刷新浏览器。
5. 自动Lint代码：对于JS代码会自动进行JSLint测试，确保代码符合最佳编程实践。
6. 内置的预览服务器：不再需要自己配置服务器了，使用内置的就可以快速预览。
7. 惊人的图片优化：通过使用OptiPNG和JPEGTran来优化图片，减少下载损耗。
8. 杀手级包管理：通过bower search jQuery，可以快速安装和更新相关的文件，不再需要打开浏览器自己搜索了。
9. PhantomJS单元测试：可以非常方便的使用PhantomJS进行单元测试，一切在项目初始的时候都准备好了。

安装前的准备工作

1. 检查系统中是否安装了：Node.js、Ruby、Compass、Python。
2. Mac下安装Node.js非常方便，首页提供了一个pkg下载，双击后可以默认安装node、npm到/usr/local/bin下，我们只需要确保/usr/local/bin包含在PATH变量中就可以。windows下安装node.js的方法见：http://blog.csdn.net/panlingfan/article/details/27083909
3. Mac Mountain Lion 下自带了Ruby，所以也就不需要再单独安装了，windows下安装ruby的方法请看下面的”安装ruby“。
4. Compass安装需要依赖于Ruby Gems。所以只有先安装了ruby，才能安装Compass，安装方法请看下面的”安装Compass“。

安装

环境准备好之后，就可以进行安装了

 

安装nodejs

 

安装地址：http://blog.csdn.net/panlingfan/article/details/27083909 ，注：安装完nodejs后，nodejs和npm就都完成了，不需要再重新安装npm。

 

安装ruby

1. 在ruby的官方网站http://rubyinstaller.org/downloads/下载ruby的安装文件，Ruby 2.0.0-p481表示windows的32位系统，Ruby 2.0.0-p481(x64)表示windows的64位系统。用户可针对各自电脑型号下载相应的安装包                         
2. 安装包下载成功后，运行安装文件，按照步骤依次安装，特别强调，安装时下图中的三个框全部选中。                                    
3. 安装完成之后，打开命令行（如果找不到命令框，在开始程序那里的搜索框中搜索ruby,就会出现这样一个选项，，直接打开即可），在命令行中输入以下命令：ruby –v。如果成功打出了版本号，说明Ruby安装成功（下图中的C:\Users\win7>不用在意，直接输入ruby -v即可）。

 

安装Compass

1. Compass是依赖于ruby的，如果电脑上没有安装ruby，就无法安装compass。
2. 在ruby命令行中键入：gem install compass（windows系统下），sudo gem install compass（Linux或OS X下）。等待30秒的样子，看到几条这样的信息就表示安装成功了。                                               
3. 键入命令测试是否正常：compass -v。如果出现以下代码表示compass正常运行。

安装python

1. 在官网下载python的安装包https://www.python.org/downloads/release/python-341/
2. 按照安装步骤依次安装，安装成功后，配置python的环境变量，配置环境变量步骤如下
   1、单机我的电脑右键，选择‘属性’                                                                                                                                                                                                                                                                  2、单击‘高级系统设置’，打开系统属性对话框                                          
   3、在‘系统属性’对话框单击‘环境变量...’，打开‘环境属性’对话框。                                                   
   4、在‘环境变量’对话框里选中变量名称为path的变量，单击‘编辑’按钮，打开‘编辑系统变量’对话框 
   5、在‘编辑系统变量’里的‘变量值’一栏中所有变量值的最后加上一个英文版的”；“，然后加上将python.exe所在的目录复制上去，比如我的python.exe的路径为D：\python34                                                                  
3. 以上步骤做完后点击三个确定，即完成python的简易安装。
4. 打开cmd命令框，输入python命令即可检测是否安装成功，如果出现以下代码表示安装成功

 

安装YEOMAN

1. 在node.js命令框中运行：npm install yeoman，等待大概2秒，会出现以下代码，如果你的网速比较慢，可能会下载很久，等吧。                                                                           
2. 看到下图这张说明yeoman安装成功。
3. 配置Yeoman的环境变量，我的node.js在C:\Program Files (x86)\nodejs里面，和Yeoman不在同一个路径，不要把两者路径混淆了。配置Yeoman的环境变量和配置python的环境变量一样，不过把最后一步的‘变量值’的路径改成yeoman的路径即可，我的Yeoman的路径为：C:\Users\win7\node_modules\.bin
4. 环境变量配置成功后，打开cmd命令窗口，如果找不到，可以在开始程序那儿搜索cmd，即可找到cmd命令。键入:yeoman init                                                                                            
5. 所有问题全部输入y（y表示yes），然后回车，Yeoman会自动创建一些目录和文件。完成之后输入yeoman server启动服务器。                                                                      
6. 成功之后会自动弹出你的默认浏览器，显示如下：                                               
7. 如果看到以上内容，说明你的yeoman环境已经ok了，如果有报错，内容无法再默认浏览器中出现，使用以下命令尝试强制启动：yeoman server -force，如果强制启动成功就算ok，有一些小错误可以无视，不影响开发的（yeoman一直在弄一些新东西，不太稳定）。

 

 

以上步骤我自己亲自尝试过，安装成功。虽然中间配置变量时有一些小波折，但总算顺利安装了。