Ionic 项目创造

www.MyException.Cn  网友分享于：2015-05-16  浏览：0次

Ionic 项目创建

1.安装 nodejs

到官网下载 https://nodejs.org/ ,下载完直接安装就好了。

以下命令查看是否安装成功：

Administrator@YANL /

$ node -v

v0.12.2

Administrator@YANL /

$ npm -v

2.7.4

2. 安装git

到官网下载：http://git-scm.com/download/win

安装完成后，把安装目录\bin添加到Path环境变量：

如：Path = %Path%;C:\Program Files (x86)\Git\bin

3.安装 android sdk tools

baidu 搜索：Android SDK Tools，下载并安装，安装完成后，在程序菜单中找到"SDK Manager" 启动下载  android sdk.

需要下载：  Android SDK Platform-tools,Android SDK Build-tools及最新版的Android sdk

下载完成后自动安装。

添加环境变量：ANDROID_HOME :指向Android SDK Tools安装目录

在Path环境变量中添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

4.安装ANT

到http://ant.apache.org/ 下载ANT后，解压

添加环境变量： ANT_HOME=解压目录

在Path环境变量中添加：%ANT_HOME%\bin

5.安装JAVA

到官网下载Java ,安装完成后，添加环境变量 JAVA_HOME=java安装或解压目录

在Path环境变量中 添加：%JAVA_HOME%\bin

6.安装 ionic 和 cordova

npm install -g cordova ionic

安装完成后，就可以运行npm和cordova命令了：

Administrator@YANL /

$ ionic -v

1.3.22

Administrator@YANL /

$ cordova -v

5.0.0

6.创建工程

$ ionic start TestApp blank

Creating Ionic app in folder e:\cordova_workspace\TestApp based on blank proje

Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip

[=============================] 100% 0.0s

Downloading: https://github.com/driftyco/ionic-starter-blank/archive/master.zi

[=============================] 100% 0.0s

Update config.xml

Initializing cordova project

Updated the hooks directory to have execute permissions

running cordova plugin add org.apache.cordova.device

WARNING: org.apache.cordova.device has been renamed to cordova-plugin-device.

u may not be getting the latest version! We suggest you `cordova plugin rm org

pache.cordova.device` and `cordova plugin add cordova-plugin-device`.

Fetching plugin "org.apache.cordova.device" via cordova plugins registry

npm http GET http://registry.cordova.io/org.apache.cordova.device

npm http 304 http://registry.cordova.io/org.apache.cordova.device

Saving plugin to package.json file

Adding since there was no existingPlugin

Updated the hooks directory to have execute permissions

running cordova plugin add org.apache.cordova.console

WARNING: org.apache.cordova.console has been renamed to cordova-plugin-console

You may not be getting the latest version! We suggest you `cordova plugin rm o

.apache.cordova.console` and `cordova plugin add cordova-plugin-console`.

Fetching plugin "org.apache.cordova.console" via cordova plugins registry

npm http GET http://registry.cordova.io/org.apache.cordova.console

npm http GET http://registry.cordova.io/org.apache.cordova.console

npm http GET http://registry.cordova.io/org.apache.cordova.console

Saving plugin to package.json file

Adding since there was no existingPlugin

Updated the hooks directory to have execute permissions

running cordova plugin add com.ionic.keyboard

Fetching plugin "com.ionic.keyboard" via cordova plugins registry

npm http GET http://registry.cordova.io/com.ionic.keyboard

npm http GET http://registry.cordova.io/com.ionic.keyboard

npm http 304 http://registry.cordova.io/com.ionic.keyboard

Saving plugin to package.json file

Adding since there was no existingPlugin

Your Ionic project is ready to go! Some quick tips:

* cd into your project: $ cd TestApp

* Setup this project to use Sass: ionic setup sass

* Develop in the browser with live reload: ionic serve

* Add a platform (ios or Android): ionic platform add ios [android]

Note: iOS development requires OS X currently

See the Android Platform Guide for full Android installation instructions:

https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.ht

* Build your app: ionic build

* Simulate your app: ionic emulate

* Run your app on a device: ionic run

* Package an app using Ionic package service: ionic package

For more help use ionic --help or visit the Ionic docs: http://ionicframework.

m/docs

+---------------------------------------------------------+

+ New Ionic Updates for May 2015

+

+ The View App just landed. Preview your apps on any device

+ http://view.ionic.io

+

+ Invite anyone to preview and test your app

+ ionic share EMAIL

+

+ Generate splash screens and icons with ionic resource

+ http://ionicframework.com/blog/automating-icons-and-splash-screens/

+

+---------------------------------------------------------+

为项目添加运行平台：

$ ionic platform add android

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: android

running cordova platform add android

npm http GET https://registry.npmjs.org/cordova-android/4.0.0

npm http GET https://registry.npmjs.org/cordova-android/4.0.0

npm http 200 https://registry.npmjs.org/cordova-android/4.0.0

npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.

tgz

npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.

tgz

Adding android project...

Creating Cordova project for the Android platform:

Path: platforms\android

Package: com.ionicframework.testapp395516

Name: TestApp

Activity: MainActivity

Android target: android-22

Copying template files...

Android project created with cordova-android@4.0.0

Running command: "c:\Program Files\nodejs\node.exe" e:\cordova_workspace\TestApp

\hooks\after_prepare\010_add_platform_class.js e:/cordova_workspace/TestApp

add to body class: platform-android

Installing "com.ionic.keyboard" for android

Installing "org.apache.cordova.console" for android

Installing "org.apache.cordova.device" for android

Saving platform to package.json file7.查看项目目录结构

WWW目录结构：

index.html:

Ionic Blank Starter

8.安装js模块(可以不安装)

package.json如下：

{

"name": "testapp",

"version": "1.0.0",

"description": "TestApp: An Ionic project",

"dependencies": {

"gulp": "^3.5.6",

"gulp-sass": "^1.3.3",

"gulp-concat": "^2.2.0",

"gulp-minify-css": "^0.3.0",

"gulp-rename": "^1.2.0"

},

"devDependencies": {

"bower": "^1.3.3",

"gulp-util": "^2.2.14",

"shelljs": "^0.3.0"

},

"cordovaPlugins": [

"org.apache.cordova.device",

"org.apache.cordova.console",

"com.ionic.keyboard"

],

"cordovaPlatforms": [

"android"

]

}

在项目目录下运行：

mpm install ，安装package.json中的依赖的js模块

$ npm install

npm WARN package.json testapp@1.0.0 No repository field.

npm WARN package.json testapp@1.0.0 No README data

-

> node-sass@2.1.1 install e:\cordova_workspace\TestApp\node_modules\gulp-sass\no

de_modules\node-sass

> node scripts/install.js

/

> node-sass@2.1.1 postinstall e:\cordova_workspace\TestApp\node_modules\gulp-sas

s\node_modules\node-sass

> node scripts/build.js

`win32-x64-node-0.12` exists; testing

Binary is fine; exiting

gulp-rename@1.2.2 node_modules\gulp-rename

shelljs@0.3.0 node_modules\shelljs

gulp-minify-css@0.3.13 node_modules\gulp-minify-css

├── memory-cache@0.0.5

├── bufferstreams@0.0.2 (readable-stream@1.0.33)

├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)

├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)

├── clean-css@3.0.10 (commander@2.5.1, source-map@0.1.43)

└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a

rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint

erpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@

1.0.0, vinyl@0.4.6, dateformat@1.0.11, multipipe@0.1.2)

gulp-concat@2.5.2 node_modules\gulp-concat

├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)

├── concat-with-sourcemaps@1.0.2 (source-map@0.4.2)

└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a

rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint

erpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@

1.0.0, vinyl@0.4.6, dateformat@1.0.11, multipipe@0.1.2)

gulp-util@2.2.20 node_modules\gulp-util

├── lodash._reinterpolate@2.4.1

├── minimist@0.2.0

├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-colo

r@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)

├── vinyl@0.2.3 (clone-stats@0.0.1)

├── dateformat@1.0.11 (get-stdin@4.0.1, meow@3.1.0)

├── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33)

├── multipipe@0.1.2 (duplexer2@0.0.2)

└── lodash.template@2.4.1 (lodash.values@2.4.1, lodash.templatesettings@2.4.1

, lodash._escapestringchar@2.4.1, lodash.defaults@2.4.1, lodash.keys@2.4.1, loda

sh.escape@2.4.1)

gulp@3.8.11 node_modules\gulp

├── pretty-hrtime@0.2.2

├── interpret@0.3.10

├── deprecated@0.0.1

├── archy@1.0.0

├── tildify@1.0.0 (user-home@1.1.1)

├── v8flags@2.0.5 (user-home@1.1.1)

├── minimist@1.1.1

├── semver@4.3.4

├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-colo

r@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream

@0.1.5)

├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a

rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint

erpolate@3.0.0, replace-ext@0.0.1, vinyl@0.4.6, through2@0.6.5, multipipe@0.1.2,

dateformat@1.0.11, chalk@1.0.0, lodash.template@3.5.1)

├── vinyl-fs@0.3.13 (graceful-fs@3.0.6, mkdirp@0.5.0, strip-bom@1.0.0, vinyl@

0.4.6, defaults@1.0.2, through2@0.6.5, glob-watcher@0.0.6, glob-stream@3.1.18)

└── liftoff@2.0.3 (extend@2.0.1, flagged-respawn@0.3.1, resolve@1.1.6, findup

-sync@0.2.1)

gulp-sass@1.3.3 node_modules\gulp-sass

├── map-stream@0.1.0

├── clone@0.1.19

├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)

├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a

rray-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._re

evaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@

1.0.0, vinyl@0.4.6, dateformat@1.0.11, through2@0.6.5, multipipe@0.1.2)

└── node-sass@2.1.1 (get-stdin@4.0.1, object-assign@2.0.0, replace-ext@0.0.1,

nan@1.8.4, semver@4.3.4, mkdirp@0.5.0, meow@3.1.0, cross-spawn@0.2.9, chalk@0.5

.1, npmconf@2.1.1, gaze@0.5.1, mocha@2.2.4, pangyp@2.2.0, sass-graph@1.3.0, requ

est@2.55.0)

bower@1.4.1 node_modules\bower

├── is-root@1.0.0

├── junk@1.0.1

├── stringify-object@1.0.1

├── abbrev@1.0.5

├── chmodr@0.1.0

├── user-home@1.1.1

├── rimraf@2.3.3

├── archy@1.0.0

├── bower-logger@0.2.2

├── bower-endpoint-parser@0.2.2

├── graceful-fs@3.0.6

├── opn@1.0.2

├── lockfile@1.0.0

├── lru-cache@2.6.2

├── retry@0.6.1

├── nopt@3.0.1

├── tmp@0.0.24

├── q@1.4.0

├── semver@2.3.2

├── fstream@1.0.6 (inherits@2.0.1)

├── mout@0.11.0

├── mkdirp@0.5.0 (minimist@0.0.8)

├── p-throttler@0.1.1 (q@0.9.7)

├── request-progress@0.3.1 (throttleit@0.0.2)

├── promptly@0.2.0 (read@1.0.5)

├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)

├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-colo

r@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)

├── github@0.2.4 (mime@1.3.4)

├── shell-quote@1.4.3 (array-map@0.0.0, array-reduce@0.0.0, array-filter@0.0.

1, jsonify@0.0.0)

├── which@1.1.1 (is-absolute@0.1.7)

├── handlebars@2.0.0 (uglify-js@2.3.6, optimist@0.3.7)

├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)

├── bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, mout@0.9.1, optimist@

0.6.1)

├── tar-fs@1.5.0 (pump@1.0.0, tar-stream@1.1.4)

├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, binary@0.3.0, readable-s

tream@1.1.13)

├── insight@0.5.3 (object-assign@2.0.0, async@0.9.0, lodash.debounce@3.0.3, o

s-name@1.0.3, tough-cookie@0.12.1)

├── bower-registry-client@0.3.0 (graceful-fs@2.0.3, request-replay@0.2.0, rim

raf@2.2.8, lru-cache@2.3.1, mkdirp@0.3.5, async@0.2.10, request@2.51.0)

├── request@2.53.0 (caseless@0.9.0, json-stringify-safe@5.0.0, aws-sign2@0.5.

0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.6.0, tunnel-agent@0.4.0

, isstream@0.1.2, node-uuid@1.4.3, qs@2.3.3, combined-stream@0.0.7, form-data@0.

2.0, mime-types@2.0.11, tough-cookie@1.1.0, http-signature@0.10.1, bl@0.9.4, haw

k@2.3.1)

├── configstore@0.3.2 (object-assign@2.0.0, xdg-basedir@1.0.1, osenv@0.1.0, u

uid@2.0.1, js-yaml@3.3.1)

├── inquirer@0.8.0 (figures@1.3.5, ansi-regex@1.1.1, mute-stream@0.0.4, throu

gh@2.3.7, readline2@0.1.1, chalk@0.5.1, lodash@2.4.2, rx@2.5.2, cli-color@0.3.3)

├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.7)

├── glob@4.5.3 (inherits@2.0.1, once@1.3.2, inflight@1.0.4, minimatch@2.0.7)

└── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.0, semver-diff@2.0

.0, latest-version@1.0.0)

安装browser-sync js模块：(用于与gulp结合使用，开启web服务，供浏览器访问页面)

$ npm install browser-sync --save-dev

npm WARN package.json testapp@1.0.0 No repository field.

npm WARN package.json testapp@1.0.0 No README data

npm WARN optional dep failed, continuing fsevents@0.3.6

\

> ws@0.5.0 install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_m

odules\socket.io\node_modules\engine.io\node_modules\ws

> (node-gyp rebuild 2> builderror.log) || (exit 0)

|

e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no

de_modules\engine.io\node_modules\ws>if not defined npm_config_node_gyp (node "c

:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\nod

e-gyp\bin\node-gyp.js" rebuild ) else (rebuild)

/

> ws@0.4.31 install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_

modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\no

de_modules\ws

> (node-gyp rebuild 2> builderror.log) || (exit 0)

e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no

de_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws>if not

defined npm_config_node_gyp (node "c:\Program Files\nodejs\node_modules\npm\bin

\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (reb

uild)

browser-sync@2.7.1 node_modules\browser-sync

├── async-each-series@0.1.1

├── query-string@1.0.1

├── emitter-steward@0.0.1

├── opn@1.0.2

├── dev-ip@1.0.1

├── ua-parser-js@0.7.7

├── browser-sync-client@2.0.2

├── immutable@3.7.2

├── portscanner@1.0.0 (async@0.1.15)

├── easy-extender@2.3.1 (lodash@2.4.2)

├── connect@3.3.5 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.1.3, finalhandl

er@0.3.4)

├── lodash@3.8.0

├── serve-index@1.6.4 (escape-html@1.0.1, parseurl@1.3.0, batch@0.5.2, debug@

2.2.0, mime-types@2.0.11, http-errors@1.3.1, accepts@1.2.7)

├── resp-modifier@2.0.1 (minimatch@2.0.7)

├── serve-static@1.9.2 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0,

send@0.12.2)

├── chokidar@1.0.1 (is-glob@1.1.3, arrify@1.0.0, glob-parent@1.2.0, async-eac

h@0.1.6, is-binary-path@1.0.0, readdirp@1.3.0)

├── localtunnel@1.5.0 (debug@0.7.4, request@2.11.4, optimist@0.3.4)

├── anymatch@1.3.0 (arrify@1.0.0, micromatch@2.1.6)

├── foxy@10.1.2 (cookie@0.1.2, http-proxy@1.11.1)

├── eazy-logger@2.1.2 (opt-merger@1.1.0, tfunk@3.0.1)

├── meow@3.1.0 (object-assign@2.0.0, minimist@1.1.1, camelcase-keys@1.0.0, in

dent-string@1.2.1)

├── browser-sync-ui@0.5.8 (connect-history-api-fallback@0.0.5, angular-saniti

ze@1.3.15, angular-route@1.3.15, angular-touch@1.3.15, angular@1.3.15, stream-th

rottle@0.1.3, weinre@2.0.0-pre-I0Z7U9OV)

└── socket.io@1.3.5 (debug@2.1.0, has-binary-data@0.1.3, socket.io-parser@2.2

.4, socket.io-adapter@0.3.1, engine.io@1.5.1, socket.io-client@1.3.5)

在项目目录下有gulpfile.js，是gulp运行时的配置文件，打开该文件添加：

var browserSync = require('browser-sync');

// Start the server

gulp.task('browser-sync', function() {

browserSync({

server: {

baseDir: "./www" //web服务的根

},

port:3000 //web服务的端口

});

});

// Reload all Browsers

gulp.task('bs-reload', function () {

browserSync.reload();

});

var files = [

'./www/*.html',

'./www/img/**/*.*',

'./www/views/**/*.html',

'./www/js/**/*.js',

'./www/css/**/*.css'

];

// Watch scss AND html files, doing different things with each.

gulp.task('server', ['browser-sync'], function () {

gulp.watch(files, ['bs-reload']);//检测文件，如有变化自动更新浏览器的显示

});