使用 YeoMan 构建 ember项目
目录
1.Ye oMan 简介
Yeoman 是一个高效 的前 端 开发工具 , 同时它也是一个工作流 , 帮助开发 者 方便的进行前 端 开发。它包括了三个部分yo、grunt、bower,分别用于项目的启动、文件操作、包管理。
- Yo: Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件 , 获得该类项目的网站骨架。
- GruntJS: GruntJS是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。
- Bower: Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
2. 环境 准备
以下为 YeoMan 的安装 过程:
2.1 .安装 Ruby
Ruby 官方下载最新安装包: http://rubyinstaller.org/downloads/ ;
注意选择 合适的 操作系统版本,比如 64 位 Win7 ,选择 Ruby 2.0.0-p195 (x64) 。
注意把上面三个框都勾起。
安装完成之后,打开命令行,输入以下命令:
ruby –v
如果成功打出了版本号,说明 Ruby 安装成功。
2. 2 .安装 Compass
Compass 是一个用来开发 CSS 的工具, 进入链接: http://rubygems.org/gems/compass 右侧可找到“ Runtime Dependencies ”,安装 compass之前需要 先把依赖的东西装上(分别点击各个链接,找到安装命令)。
然后下载最新 compass 的 gem 包,下载完成之后,从本地来安装它,命令如下:
gem install --local 存放 路径\compass***.gem
(注意你自己的存放路径!)
如果安装的时候出现 类似以下 的错误:
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)