Yeoman入门之安装及环境配置

YEOMAN的特性
  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. compass是依赖于sass的,因此必须在完成sass的安装后才能安装compass。
  3. 在cmd命令行中找到Ruby200主文件夹的位置,然后在改路劲下键入:gem install sasswindows系统下),等待30秒,注意,在安装sass和compass时电脑必须链接互联网。                                                                                                      
  4. 再键入sass -v测试看是否安装成功,如果出现了一个版本号说明安装成功
  5. compass的安装和sass一样,找到Ruby200主目录,在cmd命令行中键入gem install compass(windows系统下),sudo gem install compass(Linux或OS X下)。等待30秒的样子,看到几条这样的信息就表示安装成功了。                
  6. 键入命令测试是否正常: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. 打开cmd黑窗口,在node.js目录下键入:npm install yeoman,我的node.js目录在d:/js_tools/nodejs/node_modules等待大概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一直在弄一些新东西,不太稳定)。


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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值