e74g46q7t9 发表于 2016-5-16 10:16:56

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
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...
Looking up developer disk image
[ 90%] Mounting developer disk image
[ 95%] Developer disk image already mounted
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 Apache Cordova native platform version 3.8.0 is starting.
2015-10-06 14:17:15.404 TestApp Multi-tasking -> Device: YES, App: YES
2015-10-06 14:17:15.413 TestApp Unlimited access to network resources
2015-10-06 14:17:15.732 TestApp 0.828981ms
2015-10-06 14:17:16.570 TestApp 836.742997ms
2015-10-06 14:17:16.571 TestApp 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)
 
页: [1]
查看完整版本: MAC OS X 10.10.5下 ionic 环境搭建