MAC OS X 10.10.5下 ionic 环境搭建

一、安装xcode7

进入appstore,搜索 xcode ,找到xcode 点击安装按钮，就从appstore下载，大约2个多G吧。 需要重启安装

 xcode安装完成。

 

 安装command line tools:

 

 

yanleideMac:/ yanlei$ cd /

yanleideMac:/ yanlei$ cd Applications/
yanleideMac:Applications yanlei$ cd Utilities/

yanleideMac:Utilities yanlei$ xcode-select --install
xcode-select: note: install requested for command line developer tools

 

 点击安装。

 

命令行工具位置：/Library/Developer/CommandLineTools

 

 xcode 添加Apple ID :

点击xcode 菜单中的Preferences,进入Accounts标签，这里选择添加Apple ID：

 

添加完成后：

 

点击view details:

 选 择 ios development -->create,创建完成后关闭窗口。

 

 

 

二、安装nodejs 

 

   进入https://nodejs.org/en/download/ 

   下载nodejs:

 下载的文件为：node-v4.1.1-darwin-x64.tar

  转存在指定目录，解压：

 

yanleideMac:nodejs yanlei$ tar -xvf node-v4.1.1-darwin-x64.tar 
x node-v4.1.1-darwin-x64/
x node-v4.1.1-darwin-x64/bin/
x node-v4.1.1-darwin-x64/CHANGELOG.md
x node-v4.1.1-darwin-x64/include/
x node-v4.1.1-darwin-x64/lib/
x node-v4.1.1-darwin-x64/LICENSE
x node-v4.1.1-darwin-x64/README.md
x node-v4.1.1-darwin-x64/share/
x node-v4.1.1-darwin-x64/share/doc/
.......
x node-v4.1.1-darwin-x64/bin/node
x node-v4.1.1-darwin-x64/bin/npm

 

  打开终端， 设置环境变量：

 

 

 

yanleideMac:~ yanlei$ cd 
yanleideMac:~ yanlei$ pwd
/Users/yanlei
yanleideMac:~ yanlei$  touch ~/.bash_profile（如果存在该文件，可跳过）
yanleideMac:~ yanlei$ vi .bash_profil
export NODE_HOME=/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64
export PATH=$NODE_HOME/bin:$PATH
export NODE_PATH=$NODE_HOME/lib/node_modules:$PATH
:wq

 关闭终端，打开终端：

 

 

yanleideMac:~ yanlei$ node -v
v4.1.1
yanleideMac:~ yanlei$ npm -v
2.14.4

  安装成功。

 

 

二、安装ionic+cordova

   安装cordova:npm install -g cordova

 

yanleideMac:~ yanlei$ npm install -g cordova
npm WARN engine xmlbuilder@2.2.1: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"4.1.1","npm":"2.14.4"})
/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/bin/cordova -> /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/cordova/bin/cordova
cordova@5.3.3 /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.7)
└── cordova-lib@5.3.3 (valid-identifier@0.0.1, unorm@1.3.3, osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, semver@4.3.6, shelljs@0.3.0, dep-graph@1.1.0, rc@0.5.2, xcode@0.8.0, npmconf@2.1.2, elementtree@0.1.6, glob@5.0.15, tar@1.0.2, request@2.47.0, cordova-app-hello-world@3.9.0, plist@1.1.0, cordova-serve@0.1.3, init-package-json@1.9.1, cordova-registry-mapper@1.1.12, aliasify@1.7.2, npm@2.14.7, cordova-js@4.1.1)

yanleideMac:~ yanlei$ cordova -v
5.3.3

    安装ionic :npm install -g ionic

 

 

yanleideMac:~ yanlei$ npm install -g ionic
npm WARN engine cordova-js@4.0.0: wanted: {"node":"~0.10.x"} (current: {"node":"4.1.1","npm":"2.14.4"})
npm WARN engine npm@1.3.4: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"4.1.1","npm":"2.14.4"})
npm WARN engine xmlbuilder@2.2.1: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"4.1.1","npm":"2.14.4"})
npm WARN installMany normalize-package-data was bundled with npm@1.3.4, but bundled package wasn't found in unpacked tree
/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/bin/ionic -> /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ionic/bin/ionic
ionic@1.6.5 /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ionic
├── underscore@1.7.0
├── connect-livereload@0.5.2
├── proxy-middleware@0.7.0
├── progress@1.1.7
├── open@0.0.5
├── colors@0.6.2
├── q@1.0.1
├── async@0.9.2
├── crc@3.2.1
├── ncp@0.4.2
├── semver@4.3.6
├── shelljs@0.2.6
├── cross-spawn@0.2.3 (lru-cache@2.7.0)
├── finalhandler@0.2.0 (escape-html@1.0.1, debug@2.0.0)
├── event-stream@3.0.20 (pause-stream@0.0.11, duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, split@0.2.10, through@2.3.8, map-stream@0.0.6)
├── cli-table@0.3.1 (colors@1.0.3)
├── connect@3.1.1 (utils-merge@1.0.0, parseurl@1.3.0, finalhandler@0.1.0, debug@1.0.4)
├── optimist@0.6.0 (wordwrap@0.0.3, minimist@0.0.10)
├── form-data@0.1.4 (mime@1.2.11, combined-stream@0.0.7)
├── serve-static@1.7.1 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.10.1)
├── opbeat-ionic@1.1.3 (console-log-level@1.1.2, json-stringify-safe@5.0.1, stackman@0.2.3, after-all@2.0.2)
├── tiny-lr-fork@0.0.5 (debug@0.7.4, qs@0.5.6, faye-websocket@0.4.4, noptify@0.0.3)
├── request@2.51.0 (aws-sign2@0.5.0, forever-agent@0.5.2, caseless@0.8.0, tunnel-agent@0.4.1, oauth-sign@0.5.0, stringstream@0.0.4, json-stringify-safe@5.0.1, mime-types@1.0.2, qs@2.3.3, node-uuid@1.4.3, tough-cookie@2.0.0, combined-stream@0.0.7, http-signature@0.10.1, form-data@0.2.0, bl@0.9.4, hawk@1.1.1)
├── vinyl-fs@0.3.7 (graceful-fs@3.0.8, lodash@2.4.2, strip-bom@1.0.0, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
├── unzip@0.1.9 (setimmediate@1.0.2, pullstream@0.4.1, readable-stream@1.0.33, match-stream@0.0.2, binary@0.3.0, fstream@0.1.31)
├── prompt@0.2.12 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.7, utile@0.2.1, winston@0.6.2)
├── gulp@3.8.8 (pretty-hrtime@0.2.2, interpret@0.3.10, deprecated@0.0.1, archy@0.0.2, minimist@1.2.0, semver@3.0.1, tildify@1.1.1, chalk@0.5.1, orchestrator@0.3.7, gulp-util@3.0.6, liftoff@0.12.1)
├── xml2js@0.4.4 (sax@0.6.1, xmlbuilder@3.1.0)
├── cheerio@0.19.0 (entities@1.1.1, dom-serializer@0.1.0, lodash@3.10.1, css-select@1.0.0, htmlparser2@3.8.3)
├── npm@2.1.3
└── ionic-app-lib@0.3.9 (vinyl-fs@1.0.0, archiver@0.5.2, ionic-cordova-lib@5.1.7)
yanleideMac:~ yanlei$ ionic -v
1.6.5

 

    安装发布运行工具

npm install -g ios-sim
npm install -g ios-deploy

 

 

 yanleideMac:app yanlei$ npm install -g ios-sim
/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/bin/ios-sim -> /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ios-sim/bin/ios-sim
ios-sim@5.0.1 /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ios-sim
├── bplist-parser@0.0.6
├── nopt@1.0.9 (abbrev@1.0.7)
└── simctl@0.0.6 (tail@0.4.0, shelljs@0.2.6)
yanleideMac:app yanlei$ npm install -g ios-deploy
|
> ios-deploy@1.7.0 preinstall /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ios-deploy
> make ios-deploy

gcc -ObjC -g -o ios-deploy -framework Foundation -framework CoreFoundation -framework MobileDevice -F/System/Library/PrivateFrameworks ios-deploy.c
/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/bin/ios-deploy -> /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ios-deploy/ios-deploy
ios-deploy@1.7.0 /Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/lib/node_modules/ios-deploy

 

 

 

    三、建立ionic 工程

 

 

 

yanleideMac:app yanlei$ cd projects
yanleideMac:projects yanlei$ ls
yanleideMac:projects yanlei$ ionic start TestApp tabs

 

 

    添加ios 平台：

 

yanleideMac:projects yanlei$ cd TestApp
yanleideMac:TestApp yanlei$ ionic platform add ios
Updated the hooks directory to have execute permissions
Downloading Default Ionic Resources
Downloading: https://github.com/driftyco/ionic-default-resources/archive/master.zip
[=============================]  100%  0.0s
Done adding default Ionic resources
Adding icons for platform: ios
Platform ios already added.

   编译工程：

     ionic build ios

yanleideMac:TestApp yanlei$ ionic build ios
Running command: /Users/yanlei/app/projects/TestApp/hooks/after_prepare/010_add_platform_class.js /Users/yanlei/app/projects/TestApp
add to body class: platform-ios
Running command: /Users/yanlei/app/projects/TestApp/platforms/ios/cordova/build 
Building project  : /Users/yanlei/app/projects/TestApp/platforms/ios/TestApp.xcodeproj
...............................................
Touch build/emulator/TestApp.app
    cd /Users/yanlei/app/projects/TestApp/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/yanlei/app/nodejs/node-v4.1.1-darwin-x64/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /usr/bin/touch -c /Users/yanlei/app/projects/TestApp/platforms/ios/build/emulator/TestApp.app

** BUILD SUCCEEDED **

** BUILD SUCCEEDED **

 

通过窗口方式进入目录：/Users/yanlei/app/projects/TestApp/platforms/ios ，里面有个文件：

 

TestApp.xcodeproj，双击打开xcode7

 

 

 

 

 加添工程运行目标为真机：

  iphone手机能过数据线连接电脑，手机提示： 是否信任，点击信任同意。 

  在xcode 中：

   

1 、 选择运行的真机

2、点击三角符号（show the issue navigator）

3.   选择“TestApp.xcodeproj”

4.在右侧窗体中team 选择“ Apple ID” 点击fix issue.

 

 

 

四、运行工程：

 

    在xcode中点击启动按钮：

 

下一次，再运行时，直接地终端录入命令就可以了：

yanleideMac:projects yanlei$ cd TestApp
yanleideMac:TestApp yanlei$ ionic run ios --device
[100%] Installed package /Users/yanlei/app/projects/TestApp/platforms/ios/build/device/TestApp.app
------ Debug phase ------
Starting debug of iPad 4 '“Administrator”的 iPad' (5c678bc938f2a941d251b091828f856711684d73) connected through USB...
[  0%] Looking up developer disk image
[ 90%] Mounting developer disk image
[ 95%] Developer disk image already mounted
[100%] Connecting to remote debug server
-------------------------
(lldb) command source -s 0 '/tmp/fruitstrap-lldb-prep-cmds-5c678bc938f2a941d251b091828f856711684d73'
Executing commands in '/tmp/fruitstrap-lldb-prep-cmds-5c678bc938f2a941d251b091828f856711684d73'.
(lldb)     platform select remote-ios --sysroot '/Users/yanlei/Library/Developer/Xcode/iOS DeviceSupport/7.0.4 (11B554a)/Symbols'
  Platform: remote-ios
 Connected: no
  SDK Path: "/Users/yanlei/Library/Developer/Xcode/iOS DeviceSupport/7.0.4 (11B554a)/Symbols"
(lldb)     target create "/Users/yanlei/app/projects/TestApp/platforms/ios/build/device/TestApp.app"
Current executable set to '/Users/yanlei/app/projects/TestApp/platforms/ios/build/device/TestApp.app' (armv7).
(lldb)     script fruitstrap_device_app="/private/var/mobile/Applications/93626D81-8C63-4092-BA99-09209C59C882/TestApp.app"
(lldb)     script fruitstrap_connect_url="connect://127.0.0.1:51585"
(lldb)     command script import "/tmp/fruitstrap_5c678bc938f2a941d251b091828f856711684d73.py"
(lldb)     command script add -f fruitstrap_5c678bc938f2a941d251b091828f856711684d73.connect_command connect
(lldb)     command script add -s asynchronous -f fruitstrap_5c678bc938f2a941d251b091828f856711684d73.run_command run
(lldb)     command script add -s asynchronous -f fruitstrap_5c678bc938f2a941d251b091828f856711684d73.autoexit_command autoexit
(lldb)     command script add -s asynchronous -f fruitstrap_5c678bc938f2a941d251b091828f856711684d73.safequit_command safequit
(lldb)     connect
(lldb)     run
success
2015-10-06 14:17:15.401 TestApp[218:60b] Apache Cordova native platform version 3.8.0 is starting.
2015-10-06 14:17:15.404 TestApp[218:60b] Multi-tasking -> Device: YES, App: YES
2015-10-06 14:17:15.413 TestApp[218:60b] Unlimited access to network resources
2015-10-06 14:17:15.732 TestApp[218:60b] [CDVTimer][keyboard] 0.828981ms
2015-10-06 14:17:16.570 TestApp[218:60b] [CDVTimer][splashscreen] 836.742997ms
2015-10-06 14:17:16.571 TestApp[218:60b] [CDVTimer][TotalPluginStartup] 840.344012ms

  

 OS X 下git 安装：

 登录：http://git-scm.com/downloads，下载os x版git ,下载后直接安装就可以了。 

 

yanleideMac:app yanlei$ git --version
git version 2.3.8 (Apple Git-58)