知识库 : 使用YeoMan搭建ember开发环境

Edit Document

使用 YeoMan 构建 ember项目

目录

1.YeoMan 简介

2. 环境准备

2.1 .安装 Ruby

2.2 .安装 Compass

2.3 .安装 NodeJS

2.4 安装 python 环境

2.5 安装 git

3. 安装 yeoman

 

1.Ye oMan 简介

Yeoman 是一个高效 的前 开发工具 同时它也是一个工作流 帮助开发 方便的进行前 开发。它包括了三个部分yo、grunt、bower,分别用于项目的启动、文件操作、包管理。

  1. Yo: Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件 获得该类项目的网站骨架。
  2. GruntJS: GruntJS是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。
  3. Bower: Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

2. 环境 准备

以下为 YeoMan 的安装 过程:

2.1 .安装 Ruby

Ruby 官方下载最新安装包: http://rubyinstaller.org/downloads/

注意选择 合适的 操作系统版本,比如 64 Win7 ,选择 Ruby 2.0.0-p195 (x64)

http://img0.tuicool.com/ZBZzim.png
 

注意把上面三个框都勾起。

安装完成之后,打开命令行,输入以下命令:

ruby –v

如果成功打出了版本号,说明   Ruby   安装成功。

2. 2 .安装 Compass

Compass 是一个用来开发   CSS   的工具, 进入链接: http://rubygems.org/gems/compass 右侧可找到“ Runtime Dependencies ”,安装 compass之前需要 先把依赖的东西装上(分别点击各个链接,找到安装命令)。

然后下载最新 compass gem 包,下载完成之后,从本地来安装它,命令如下:

gem install --local 存放 路径\compass***.gem

(注意你自己的存放路径!)

http://img2.tuicool.com/E3ima2.png

如果安装的时候出现 类似以下 的错误:

ERROR:   Error installing watir:
The 'ffi' native gem requires installed build tools.

Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'

尝试 解决方案:

1)         下载DevKit

DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe

2)         解压DevKit

3)         安装并测试 :

    cd到解压目录下:

E:\ember\DevKit > ruby dk.rb init

[INFO] found RubyInstaller v1.9.3 at C:/Ruby193

Initialization complete! Please review and modify the auto-ge
'config.yml' file to ensure it contains the root directories
of the installed Rubies you want enhanced by the DevKit.

 

E:\ember\DevKit > ruby dk.rb install

[INFO] Updating convenience notice gem override for 'C:/Ruby1
[INFO] Installing 'C:/Ruby193/lib/ruby/site_ruby/devkit.rb'

 

E:\ember\DevKit> gem install ffi

Successfully installed ffi-1.9.6-x86-mingw32

Parsing documentation for ffi-1.9.6-x86-mingw32

1 gem installed

安装 ffi的时候可能遇到莫名其妙的错误, 有时可以试试 关闭cmd,重新打开 再次 运行。

2. 3 .安装 NodeJS

进入 站点: http://nodejs.org/download/

选好版本安装。

2. 4 安装 python 环境

http://www.python.org/download/

选好版本自己装,装完自己确认   python   的环境变量有没有配好。 Path里面添加,记得前面添 号: ; D:\Program Files\Python27”

运行 npm 可能 出现以下错误

C:\Users\Seven> npm

Error: ENOENT, stat 'C:\Users\Seven\AppData\Roaming\npm'

因为 npm文件夹不存在,需要创建。

2. 5 安装 git

地址 为:http://git-scm.com/download/win

3. 安装 yeoman

经过 上述环境准备,可以正式的开始安装YeoMan ,YeoMan的 下载 地址为 http://yeoman.io/migrate.html 。具体 的安装流程如下:

1 安装yo,命令行输入:

npm install –g yo

2 安装grunt, bower

命令 npm install –g grunt-cli bower

3) 构建 ember项目: 进入想要建立 项目的文件夹 输入如下命令

命令 npm install -g generator-ember

yo ember   [y]

Yeoman生成的Ember应用。应用有三个顶层目录: app node_modules test 。还有一些配置文件: .bowerrc .gitignore .jshintrc Gruntfile.js package.json

a)         bower_components 目录包括了客户端依赖,例如Ember、Twitter Bootstrap,等等。Bower在所有文件夹内安装所有依赖。

b)         image 目录包括了应用相关的图像。Yeoman会优化 image 目录内的图片。

c)         index.html 包含了所有的 ember.js 依赖,所有的bootstrap依赖,以及 build 注释(Gruntfile.js可以据此替换或移除引用的未优化的脚本和样式表)。

d)         scripts 目录包含了Ember应用的controller、view、model和route。

e)         styles 目录包含了应用相关的css文件。

templates 目录包含了应用的handlebar模板。

4 启动预览服务器 实时 监控网页 状态

命令 grunt serve

查看 端口 占用 netstat -ano | findstr " 端口号 "

初始 界面 如下图 可以 根据自己的需求 构建 自己的应用

   每次编辑 ember项目 ,进入 从cmd 终端进入该项目文件夹,输入grunt serve, 启动 监控服务器, 编辑代码 时可实时查看前端反馈,无需 刷新。

              另外 ,YeoMan不仅可以安装ember,还 可以 安装 angular .js等 的多种web框架 方便易用。

 

Attachments:

使用YeoMan搭建ember开发环境.docx (application/vnd.openxmlformats-officedocument.wordprocessingml.document)
使用YeoMan搭建ember开发环境.docx (application/vnd.openxmlformats-officedocument.wordprocessingml.document)